Opacité de fond Image

Question

Liées à la CSS: fond semi-transparent, mais pas de texte, mais un peu différente.

Je voudrais savoir si il est possible de modifier la valeur alpha d'un arrière-plan de l'image, plutôt que de simplement la couleur. Évidemment, je peux juste enregistrer l'image avec différentes valeurs alpha, mais j'aimerais être capable d'ajuster l'alpha de façon 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>

Il fonctionne, mais il est encombrant et moche, et sème la pagaille dans plusieurs mises en page complexes.

Answer 1

Vous pouvez le faire à l'arrière-plan estompé avec le CSS Contenu Généré par l'

Démonstration à l' 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é que nous ne sommes pas autorisés à modifier le contenu généré..

Vous pourriez manipuler avec des classes css et événements bien (mais pas sûr que si elle répond à vos besoins)

par exemple

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

Mise à JOUR

Vous pouvez utiliser les transitions css pour animer l'opacité (de nouveau par le biais de classes)

démonstration à l' http://jsfiddle.net/gaby/WktFm/507/

L'ajout d'

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

à l' .container:before règle fera l'opacité animer à 1 dans une seconde.

Compatibilité

• FF 5 (peut-être 4 aussi, mais ne l'a pas installé.)
• IE 9 Échoue..
• Les navigateurs basés sur Webkit fail (Chrome prend en charge maintenant v26 - peut-être que les versions antérieures de trop, mais juste vérifié avec ma version actuelle), mais ils en sont conscients et le travailler https://bugs.webkit.org/show_bug.cgi?id=23209 )

.. alors que la dernière FF prend en charge pour le moment.. mais une belle idée, non ? :)

Answer 2

 .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é à partir de: http://robertnyman.com/2010/01/11/css-background-transparency-without-affecting-child-elements-through-rgba-and-filters/

Answer 3

Si l'arrière-plan n'a pas à se répéter, vous pouvez utiliser la technique du sprite (portes coulissantes) pour regrouper toutes les images en une seule, 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 . L'opacité de ces images multiples devrait s'additionner, plus vous définissez d'arrière-plans.

Answer 4

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!

Answer 5

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'.

 .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;
}