web-dev-qa-db-fra.com

CSS background-image-opacity?

En rapport avec Comment donner du texte ou une image à un arrière-plan transparent à l'aide de CSS? , mais légèrement différent.

J'aimerais savoir s'il est possible de modifier la valeur alpha d'un arrière-plan image, plutôt que la couleur uniquement. Évidemment, je peux simplement sauvegarder l'image avec différentes valeurs alpha, mais j'aimerais pouvoir ajuster l'alpha de manière dynamique.

Jusqu'à présent, le meilleur que j'ai est:

<div style="position: relative;">
    <div style="position: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px;
                      background-image: url(...); opacity: 0.5;"></div>
    <div style="position: relative; z-index: 1;">
        <!-- Rest of content here -->
    </div>
</div>

Cela fonctionne, mais c'est encombrant et moche, et gâche les choses dans des dispositions plus compliquées.

htmlcsscss3
64
Niet the Dark Absol

Si l'arrière-plan n'a pas à se répéter, vous pouvez utiliser la technique Sprite (portes coulissantes) pour regrouper toutes les images d'opacité différente (l'une à côté de l'autre), puis les déplacer avec background-position.

Vous pouvez également déclarer plusieurs fois la même image d'arrière-plan partiellement transparente, si votre navigateur cible prend en charge plusieurs arrière-plans (Firefox 3.6+, Safari 1.0+, Chrome 1.3+, Opera 10.5+, Internet Explorer 9+). L'opacité de ces images multiples devrait s'additionner, plus vous définissez d'arrière-plans.

16
DanMan

Vous pouvez faire le fond fané avec CSS Generated Content

Démo sur http://jsfiddle.net/gaby/WktFm/508/

Html 

<div class="container">
        contents
</div>

Css

.container{
    position: relative;
    z-index:1;
    overflow:hidden; /*if you want to crop the image*/
}
.container:before{
    z-index:-1;
    position:absolute;
    left:0;
    top:0;
    content: url('path/to/image.ext');
    opacity:0.4;
}

Mais vous ne pouvez pas modifier l'opacité car nous ne sommes pas autorisés à modifier le contenu généré.

Vous pouvez cependant le manipuler avec des classes et des événements CSS (mais ne savez pas si cela répond à vos besoins)

par exemple

.container:hover:before{
    opacity:1;
}

METTRE &AGRAVE; JOUR

Vous pouvez utiliser des transitions css pour animer l'opacité (encore une fois à travers les classes)

démo sur http://jsfiddle.net/gaby/WktFm/507/

Ajouter 

-webkit-transition: opacity 1s linear;
-o-transition: opacity 1s linear;
-moz-transition: opacity 1s linear;
transition: opacity 1s linear;

à la règle .container:before rend l'opacité animer à 1 en une seconde.

Compatibilité

  • FF 5 (peut-être 4 aussi, mais ne l'avez pas installé.)
  • IE 9 échoue ..
  • Les navigateurs Webkit échouent (Chrome prend maintenant en charge la version 26 - peut-être des versions antérieures aussi, mais vient d'être vérifiée avec ma version actuelle), mais ils sont conscients et travaillent dessus ( https: //bugs.webkit. org/show_bug.cgi? id = 23209 )

.. donc seul le dernier FF le supporte pour le moment .. mais une bonne idée, non? :)

40
Gabriele Petrioli
.class {
    /* Fallback for web browsers that doesn't support RGBa */
    background: rgb(0, 0, 0);
    /* RGBa with 0.6 opacity */
    background: rgba(0, 0, 0, 0.6);
}

Copié de: http://robertnyman.com/2010/01/11/css-background-transparency-without-affecting-child-elements-through-rgba-and-filters/

24
Andy.Diaz

Essayez cette astuce .. utilisez css shadow avec l'option (inset) et faites le 200px profond par exemple

Code:

box-shadow: inset 0px 0px 277px 3px #4c3f37;

.

Aussi pour tous les navigateurs:

-moz-box-shadow: inset 0px 0px 47px 3px #4c3f37;
-webkit-box-shadow: inset 0px 0px 47px 3px #4c3f37;
box-shadow: inset 0px 0px 277px 3px #4c3f37;

et augmentez le nombre pour faire remplir votre boite :)

Prendre plaisir!

11
Saud Alfadhli

Vous pouvez insérer un deuxième élément à l'intérieur de l'élément pour lequel vous souhaitez un arrière-plan transparent.

<div class="container">
    <div class="container-background"></div>
    <div class="content">
         Yay, happy content!
    </div>
</div>

Ensuite, positionnez le '.container-background' de manière à recouvrir l'élément parent. À ce stade, vous serez en mesure de régler l'opacité de celle-ci sans affecter l'opacité du contenu contenu dans '.

.container {
    position: relative;
}
.container .container-background {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: url(background.png);
    opacity: 0.5;
}
.container .content {
    position: relative;
    z-index: 1;
}
5
Alex K

Vous ne pouvez pas éditer l'image via CSS. La seule solution à laquelle je puisse penser est d’éditer l’image et de changer son opacité ou de créer différentes images avec toutes les opacités nécessaires.

1
Cokegod
#id {
  position: relative;
  opacity: 0.99;
}

#id::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -1;
  background: url('image.png');
  opacity: 0.3;
}

Pirater avec l'opacité 0,99 (inférieur à 1) crée un contexte z-index pour que vous ne puissiez pas vous inquiéter des valeurs globales des z-index. (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 .

1
user

Voici une autre approche pour configurer le dégradé et la transparence avec CSS. Cependant, vous devez jouer un peu avec les paramètres.

background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(100%, transparent)),url("gears.jpg"); /* Chrome,Safari4+ */
background-image: -webkit-linear-gradient(top, transparent, transparent),url("gears.jpg"); /* Chrome10+,Safari5.1+ */
background-image:    -moz-linear-gradient(top, transparent, transparent),url("gears.jpg"); /* FF3.6+ */
background-image:     -ms-linear-gradient(top, transparent, transparent),url("gears.jpg"); /* IE10+ */
background-image:      -o-linear-gradient(top, transparent, transparent),url("gears.jpg"); /* Opera 11.10+ */
background-image:         linear-gradient(to bottom, transparent, transparent),url("gears.jpg"); /* W3C */
0
Stanislav