web-dev-qa-db-fra.com

Définir l'opacité de l'image d'arrière-plan sans affecter les éléments enfants

Est-il possible de définir l'opacité d'une image d'arrière-plan sans affecter l'opacité des éléments enfants?

Exemple

Tous les liens dans le pied de page nécessitent une puce personnalisée (image d'arrière-plan) et l'opacité de la puce personnalisée doit être de 50%.

HTML

<div id="footer">
    <ul>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
        <li><a href="#">Link 4</a></li>
        <li><a href="#">Link 5</a></li>
    </ul>
</div>

CSS

#footer ul li {
    background: url(/images/arrow.png) no-repeat 0 50%;
}

Ce que j'ai essayé

J'ai essayé de définir l'opacité des éléments de la liste sur 50%, mais l'opacité du texte du lien est également de 50% - et il ne semble pas y avoir de moyen de réinitialiser l'opacité des éléments enfants:

#footer ul li {
    background: url(/images/arrow.png) no-repeat 0 50%;
    /* will also set the opacity of the link text */        
    opacity: 0.5;
}

J'ai aussi essayé d'utiliser rgba, mais cela n'a aucun effet sur l'image de fond:

#footer ul li {
    /* rgba doesn't apply to the background image */
    background: rgba(255, 255, 255, 0.5) url(/images/arrow.png) no-repeat 0 50%;
}
csscss3opacity
192
jmohr

Prenez votre image dans un éditeur d'image, baissez l'opacité, enregistrez-la au format .png et utilisez-la plutôt.

91
2ToneKenobi

Vous pouvez utiliser CSS linear-gradient() avec rgba().

div {
  width: 300px;
  height: 200px;
  background: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,.5)), url("https://i.imgur.com/xnh5x47.jpg");
}
span {
  background: black;
  color: white;
}
<div><span>Hello world.</span></div>

55
Stickers

Cela fonctionnera avec tous les navigateurs

div {
 -khtml-opacity:.50; 
 -moz-opacity:.50; 
 -ms-filter:"alpha(opacity=50)";
  filter:alpha(opacity=50);
  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.5);
  opacity:.50; 
}

Si vous ne souhaitez pas que la transparence affecte l'ensemble du conteneur et ses enfants, vérifiez cette solution de contournement. Vous devez avoir un enfant en position absolue avec un parent en position relative. 

Voir la démo sur http://www.impressivewebs.com/css-opacity-that-doesnt-affect-child-elements/

43
Hussein

Si vous utilisez l'image comme une puce, vous pouvez envisager le pseudo-élément: before.

#footer ul li {
}

#footer ul li:before {
    content: url(/images/arrow.png);
    filter:alpha(opacity=50);
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.5);
    opacity:.50;
}
28
Mr Griever

Vous pouvez mettre l'image dans le div: after ou div: before et définir l'opacité sur ce "div virtuel"

div:after {
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/owl1.jpg);
  opacity: 0.25;
}

trouvé ici http://css-tricks.com/snippets/css/transparent-background-images/

13
Zied Hamdi
#footer ul li {
  position: relative;
  opacity: 0.99;
}

#footer ul li::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -1;
  background: url(/images/arrow.png) no-repeat 0 50%;
  opacity: 0.5;
}

Pirater avec l'opacité .99 (inférieur à 1) crée un contexte d'index z afin que vous ne puissiez pas vous inquiéter des valeurs globales d'index z. (Essayez de le supprimer et de voir ce qui se passe dans la démo suivante où l'encapsuleur parent a un index z positif.)
Si votre élément possède déjà z-index, vous n'avez pas besoin de ce hack.

Démo de cette technique .

8
user

Malheureusement, au moment d'écrire cette réponse, il y a pas de voie directe pour le faire. Tu dois:

  1. utilisez une image semi-transparente pour le fond (beaucoup plus facile).
  2. ajoutez un élément supplémentaire (comme div) à côté des enfants dont vous voulez l'opaque, ajoutez un arrière-plan et, après l'avoir rendu semi-transparent, positionnez-le derrière les enfants mentionnés.
4
Reyraa

La propriété "filter" nécessite un entier pour le pourcentage d'opacité au lieu de double pour fonctionner avec IE7/8.

filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);

P.S .: Je poste ceci comme réponse, puisque SO a besoin d’au moins 6 caractères modifiés pour une édition.

3
lyubeto

Pour vraiment peaufiner les choses, je vous recommande de placer les sélections appropriées dans des wrappers de ciblage de navigateur. C’est la seule chose qui a fonctionné pour moi lorsque je ne pouvais pas obtenir IE7 et IE8 pour "jouer gentiment avec les autres" (car je travaille actuellement pour une société de logiciels qui continue de les soutenir).

/* color or background image for all browsers, of course */            
#myBackground {
    background-color:#666; 
}
/* target chrome & safari without disrupting IE7-8 */
@media screen and (-webkit-min-device-pixel-ratio:0) {
    #myBackground {
        -khtml-opacity:.50; 
        opacity:.50;
    }
}
/* target firefox without disrupting IE */
@-moz-document url-prefix() {
    #myBackground {
        -moz-opacity:.50;
        opacity:0.5;
    }
}
/* and IE last so it doesn't blow up */
#myBackground {
    opacity:.50;
    filter:alpha(opacity=50);
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.5);
}

J'ai peut-être des redondances dans le code ci-dessus - si quelqu'un souhaite le nettoyer davantage, n'hésitez pas!

2
code-sushi

Pour ajouter à ce qui précède, vous pouvez utiliser le canal alpha avec les nouveaux attributs de couleur, par exemple. rgba (0,0,0,0) ok, donc c'est noir mais avec une opacité nulle, donc en tant que parent cela n'affectera pas l'enfant Cela ne fonctionne que sur Chrome, FF, Safari et .... I thin O.

convertir vos couleurs d'hex en RGBA

1
Undefined

J'ai trouvé un tutoriel assez bon et simple sur ce problème. Je pense que cela fonctionne très bien (et bien qu'il supporte IE, je dis simplement à mes clients d'utiliser d'autres navigateurs):

Transparence de l'arrière-plan CSS sans affecter les éléments enfants, via RGBa et les filtres

De là, vous pouvez ajouter un support de dégradé, etc.

1
Francisco

Si vous devez définir l'opacité uniquement sur la puce, pourquoi ne pas définir le canal alpha directement dans l'image? En passant, je ne pense pas qu'il soit possible de définir l'opacité sur une image d'arrière-plan via css sans modifier l'opacité de l'élément entier (et de ses enfants également).

1
Minkiele
#footer ul li
     {
       position:relative;
       list-style:none;
     }
    #footer ul li:before
     {
       background-image: url(imagesFolder/bg_demo.png);
       background-repeat:no-repeat;
       content: "";
       top: 5px;
       left: -10px;
       bottom: 0;
       right: 0;
       position: absolute;
       z-index: -1;
       opacity: 0.5;
    }

Vous pouvez essayer ce code. Je pense que ça va marcher. Vous pouvez visiter la démo

0
Jakir Hossain

Une autre option est astuces CSS approche consistant à insérer un pseudo élément de la taille exacte de l’élément original juste derrière pour simuler l’effet de fond opaque recherché. Parfois, vous devrez définir une hauteur pour le pseudo-élément.

div {
  width: 200px;
  height: 200px;
  display: block;
  position: relative;
}

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