web-dev-qa-db-fra.com

Changer l'opacité de l'image de fond

J'ai un élément div avec des blocs de texte et un div parent dans lequel j'ai défini une image d'arrière-plan. Maintenant, je veux réduire l'opacité de l'image d'arrière-plan. S'il vous plaît suggérer comment je peux le faire.

Merci d'avance.

MODIFIER:  

Je cherche à changer la manière dont mon article de blog se présente sur blogger.com en modifiant le contenu HTML. Le code html ressemble à ceci:

<div>
 //my blog post
</div>

J'ai essayé d'entourer tout le code ci-dessus avec un élément div et de définir l'opacité de chaque div séparément, comme ci-dessous:

<div style="background-image:url("image.jpg"); opacity:0.5;">
<div style="opacity:1;">
 //my blog post
</div>
</div>

Mais ça ne fonctionne pas.

htmlbackground-imageopacity
23
Victor Mukherjee

Il n'y a rien appelé opacité de fond. L'opacité est appliquée à l'élément, à son contenu et à tous ses éléments enfants. Et ce comportement ne peut pas être modifié simplement en remplaçant l'opacité dans les éléments enfants.

L’opacité des enfants et des parents est un problème de longue date et la solution la plus courante consiste à utiliser les couleurs d’arrière-plan rgba(r,g,b,alpha). Mais dans ce cas, puisqu'il s'agit d'une image d'arrière-plan, cette solution ne fonctionnera pas. Une solution serait de générer l'image sous forme de fichier PNG avec l'opacité requise dans l'image elle-même. Une autre solution consisterait à retirer l'enfant et à le placer en position absolue.

7
techfoobar

Vous ne pouvez pas utiliser directement la transparence sur les images de fond, mais vous pouvez obtenir cet effet avec quelque chose comme ceci:

http://jsfiddle.net/m4TgL/

HTML:

<div class="container">
    <div class="content">//my blog post</div>
</div>​

CSS:

.container {  position: relative; }

.container:before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
    background-image: url('image.jpg');
   opacity: 0.5;
}

.content {
    position: relative; 
    z-index: 2;
}​
26
Alexey Ivanov

De nos jours, il est possible de le faire simplement avec la propriété CSS "background-blend-mode".

<div id="content">Only one div needed</div>

div#content {
    background-image: url(my_image.png);
    background-color: rgba(255,255,255,0.6);
    background-blend-mode: lighten;
    /* You may add things like width, height, background-size... */
}

Il va mélanger la couleur de fond (qui est blanc, opacité 0.6) dans l'image de fond. En savoir plus ici (W3S) .

23
Carlos2W

Vous pouvez créer plusieurs divs et faire cela:

<div style="width:100px; height:100px;">
   <div style="position:relative; top:0px; left:0px; width:100px; height:100px; opacity:0.3;"><img src="urltoimage" alt=" " /></div>
   <div style="position:relative; top:0px; left:0px; width:100px; height:100px;"> DIV with no opacity </div>
</div>

Je l'ai fait quelques fois ... Simple, mais efficace ...

2
deki.bg

En réponse à un commentaire précédent, vous pouvez modifier l'arrière-plan par variable dans l'exemple "conteneur" si le CSS est dans votre page php et non dans la feuille de style CSS.

$bgimage = '[some image url];
background-image: url('<?php echo $bgimage; ?>');
0
basd

Ce que j'ai fait c'est: 

<div id="bg-image"></div>
<div class="container">
    <h1>Hello World!</h1>
</div>

CSS: 

html {
    height: 100%;
    width: 100%;
}
body {
    height: 100%;
    width: 100%;
}
#bg-image {
    height: 100%;
    width: 100%;
    position: absolute;
    background-image: url(images/background.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    opacity: 0.3;
}
0
Anthony Wittenborn