CSS background-image-opacity?

Lié à Comment donner du texte ou une image à un arrière-plan transparent en utilisant CSS? , mais légèrement différent.

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

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

Cela fonctionne, mais c’est encombrant et moche, et gâche les choses dans des mises en page plus compliquées.

Si l’arrière-plan ne doit pas être répété, vous pouvez utiliser la technique du sprite (portes coulissantes) dans laquelle vous placez toutes les images avec une opacité différente (l’une à côté de l’autre), puis en les déplaçant simplement avec la background-position d’ 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+ et Internet Explorer 9+). L’opacité de ces images multiples doit être ajoutée, plus vous définissez d’arrière-plans.

Vous pouvez faire l’arrière-plan avec le contenu généré CSS

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

Html

 
contents

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 sums pas autorisés à modifier le contenu généré.

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

par exemple

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

METTRE À JOUR

Vous pouvez utiliser les transitions CSS pour animer l’opacité ( encore une fois via 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 .container:before règle rendra l’opacité animée à 1 en une seconde.

Compatibilité

  • FF 5 ( peut-être 4 également, mais ne pas l’avoir installé. )
  • IE 9 échoue ..
  • Les navigateurs Webkit échouent ( Chrome le supporte maintenant avec la version 26 – peut-être aussi les versions antérieures, mais ont juste vérifié avec ma version actuelle ), mais ils sont au courant et travaillent dessus ( https://bugs.webkit.org/show_bug.cgi?id= 23209 )

.. donc seul le dernier FF le soutient pour le moment .. mais une bonne idée, non? 🙂

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

Essayez cette astuce .. utilisez css shadow avec l’option (encart) 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 augmenter le nombre pour faire remplir votre boite 🙂

Prendre plaisir!

Vous pouvez mettre un deuxième élément à l’intérieur de l’élément sur lequel vous souhaitez avoir un arrière-plan transparent.

 
Yay, happy content!

Ensuite, positionnez le paramètre ‘.container-background’ pour couvrir l’élément parent. À ce stade, vous pourrez ajuster l’opacité de celui-ci sans affecter l’opacité du contenu à l’intérieur de ‘.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; } 

Vous ne pouvez pas modifier l’image via CSS. La seule solution que je puisse imaginer est d’éditer l’image et de changer d’opacité, ou de faire des images différentes avec toutes les opacités nécessaires.

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

Hack avec opacité 0.99 (moins de 1) crée un contexte d’index z, vous ne pouvez donc pas vous inquiéter des valeurs d’index z globales. (Essayez de le supprimer et voyez ce qui se passe dans la prochaine démo où le wrapper parent a un index z positif.)
Si votre élément a déjà z-index, vous n’avez pas besoin de ce hack.

Démo .

Voici une autre approche pour configurer le gradient et la transparence avec CSS. Cependant, vous devez jouer un peu avec les parameters.

 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 */ 
 body { ' css code that goes in your body' } body::after { background: url(yourfilename.jpg); content: ""; opacity: 0.6; position: fixed; top: 0; bottom: 0; right: 0; left: 0; z-index: -1; width:auto; height: 100%; } 

Donc, pour dire que c’est le corps :: après vous cherchez. De cette façon, le code de votre corps ne sera pas modifié ou seul l’arrière-plan où vous pourrez apporter des modifications sera modifié.