Superposition d'une image de fond d'écran avec une rgba couleur d'arrière-plan
J'ai un div
avec un background-image
. Je veux superposition de l'image de fond d'écran avec une couleur rvba (rgba(0,0,0,0.1)
) lorsque l'utilisateur place le pointeur de la div.
Je me demandais si il y a un div solution (c'est à dire pas avec plusieurs divs, un pour l'image et l'autre pour la couleur, etc.).
J'ai essayé plusieurs choses:
<div class="the-div" id="test-1"></div>
<div class="the-div" id="test-2"></div>
<div class="the-div" id="test-3"></div>
Et ce CSS:
.the-div {
background-image: url('the-image');
margin: 10px;
width: 200px;
height: 80px;
}
#test-1:hover {
background-color: rgba(0,0,0,0.1);
}
#test-2:hover {
background: url('the-image'), rgba(0,0,0,0.1);
}
#test-3:hover {
background: rgba(0,0,0,0.1);
}
Voir ce violon.
La seule option que j'ai vu est de faire une autre image, avec la superposition, la précontrainte à l'aide de JavaScript et ensuite utiliser .the-div:hover { background: url('the-new-image'); }
. Cependant, je voudrais un CSS seule solution (plus propre, moins de requêtes HTTP; moins de disque dur). Est-ce là tout?
Vous devez vous connecter pour publier un commentaire.
La solution par PeterVR a l'inconvénient que la couleur supplémentaire s'affiche sur le haut de l'ensemble du bloc HTML - en ce sens qu'il montre aussi sur le haut de la div contenu, pas seulement sur le haut de l'image d'arrière-plan. C'est bien si ton div est vide, mais si elle n'est pas en utilisant un gradient linéaire pourrait être une meilleure solution:
Voir violon. Dommage que le gradient spécifications sont actuellement un gâchis. Voir tableau de compatibilité, le code ci-dessus devrait fonctionner dans n'importe quel navigateur avec une importante part de marché - à l'exception de MSIE 9.0 et plus.
Modifier (Mars 2017): L'état de la web a obtenu bien moins salissant par maintenant. Ainsi, le
linear-gradient
(pris en charge par Firefox et Internet Explorer) et-webkit-linear-gradient
(pris en charge par Chrome, Opera et Safari), les lignes sont suffisantes, d'autres préfixé versions ne sont plus nécessaires.-moz
et-ms
versions ne devrait plus être nécessaire, en va de même pour l'héritage WebKit notation. Et je suppose que-o
n'est pas nécessaire, les nouvelles de l'Opéra de versions étant basé sur WebKit. Si vous avez vraiment seulement besoin de deux lignes.Oui, il y a une façon de le faire. Vous pouvez utiliser un pseudo-élément
after
pour la position d'un bloc au-dessus de votre image d'arrière-plan. Quelque chose comme ceci:http://jsfiddle.net/Pevara/N2U6B/
Le css pour le
:after
ressemble à ceci:edit:
Lorsque vous souhaitez appliquer à un non-vide de l'élément, et juste obtenir la superposition sur l'arrière-plan, vous pouvez le faire par l'application d'un positif
z-index
à l'élément, et négatif à la:after
. Quelque chose comme ceci:Et la mise à jour du violon: http://jsfiddle.net/N2U6B/255/
CSS:
HTML:
source: https://css-tricks.com/tinted-images-multiple-backgrounds/
Idéalement, le fond de la propriété nous permettrait de couche de divers horizons similaires à l'image d'arrière-plan de stratification détaillées à http://www.css3.info/preview/multiple-backgrounds/. Malheureusement, au moins dans Chrome (40.0.2214.115), l'ajout d'un rgba fond à côté d'une url() l'image d'arrière-plan semble casser la propriété.
La solution que j'ai trouvé est de rendre la rgba couche comme un 1px*1px encodées en Base64 de l'image et de l'inclure.
pour encodées en base64 1*1 pixel des images que j'ai utilisé http://px64.net/
Ici est votre jsfiddle avec ces changements. http://jsfiddle.net/325Ft/49/ (J'ai aussi échangé l'image de celui qui existe encore sur internet)
J'ai pris la suite de travaux:
Ci-dessus va obtenir un joli bleu opaque de superposition.