web-dev-qa-db-fra.com

Superposer une image d'arrière-plan avec une couleur rgba, avec une transition CSS3

Plus tôt dans la journée, j'ai demandé Superposer une image de fond avec une couleur de fond rgba . Mon objectif est d'avoir un div avec une image d'arrière-plan, et lorsque quelqu'un survole le div, l'image d'arrière-plan est superposée avec une couleur rgba. Dans la réponse , une solution avec :after a été donné:

#the-div {
    background-image: url('some-url');
}

#the-div:hover:after {
    content: ' ';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgba(0,0,0,.5);
}

J'aimerais maintenant avoir la même chose, mais avec une transition CSS: je voudrais que la couleur d'arrière-plan se fane. J'ai essayé d'ajouter transition: all 1s; à la #the-div CSS, mais cela n'a pas fonctionné. J'essaie également de l'ajouter à #the-div:hover et #the-div:after, mais cela n'a pas fonctionné non plus.

Existe-t-il un moyen CSS pur d'ajouter un fondu en surimpression à un div avec une image d'arrière-plan?

csscss3overlaybackground-imagecss-transitions
15
Keelan

Oui c'est possible.

démo

.boo {
  position: relative;
  width: 20em; min-height: 10em;
  background: rgba(0,0,0,0) url(http://placekitten.com/320/160);
  transition: background-color 1s;
}
.boo:hover {
  background-color: rgba(0,0,0,.5);
}
.boo:before {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background-color: inherit;
  content: ' ';
}

Qu'est ce que je fais ici?

Ce que je fais ici, c'est que je mets un RGBa background-color Sur le div, derrière son background-image Et que je fais la transition de ce background-color (Son alpha) sur :hover. Tout cela se passe derrière le background-image. Cependant, j'utilise également background-color: inherit Sur le pseudo-élément, ce qui signifie qu'à tout moment, le pseudo-élément, qui est situé au-dessus de son parent div (et donc au-dessus du background-image De la div) va avoir la même background-color (Ce qui signifie que le background-color Du pseudo-élément va passer de la fonction rgba(0,0,0,0) à rgba(0,0,0,.5) sur :hover).

Pourquoi le faire de cette façon?

La raison pour laquelle je ne transige pas directement le background-color Du pseudo-élément est que le support des transitions sur les pseudo-éléments n'est pas encore aussi bon.

Prise en charge des transitions sur les pseudo-éléments

✓ Firefox prend en charge les transitions sur les pseudo-éléments et les prend en charge depuis un certain temps, éliminons-le d'abord.

✗ Versions actuelles de Safari et Opera ne prend pas en charge les transitions sur les pseudo-éléments.

Chrome prend en charge les transitions sur les pseudo-éléments uniquement à partir de la version 26.

IE10 les prend en charge de manière un peu étrange, ce qui signifie que quelque chose comme:

.boo:before { color: blue; transition: 1s; }
.boo:hover:before { color: red; }

ne fonctionnera pas, vous devez également spécifier l'état de survol sur l'élément lui-même. Comme ça:

.boo:hover {}
.boo:before { color: blue; transition: 1s; }
.boo:hover:before { color: red; }

Plus d'informations et d'exemples sur la façon dont vous pouvez effectuer la transition de diverses propriétés de pseudo-éléments à l'aide de cette technique inherit: http://vimeo.com/51897358

[~ # ~] modifier [~ # ~]

Les transitions directement sur les pseudo-éléments sont désormais prises en charge dans Opera depuis le passage à Blink et dans Safari depuis 6.1.

29
Ana

Bien que la technique @Ana soit également agréable et fonctionne bien, permettez-moi de modifier légèrement ma réponse à la question précédente , et d'ajouter la transition dans ce code. http://jsfiddle.net/Pevara/N2U6B/2/

#the-div {
    width: 500px;
    height: 500px;
    background: url(http://placekitten.com/500/500) no-repeat center center;
    position: relative;
}

#the-div:after {
    content: ' ';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0);
    transition: background-color .5s;
}
#the-div:hover:after {
    background-color: rgba(0,0,0,.5);   
}

Ce que j'ai fait, c'est que j'ai défini le :after pseudo-élément sur l'état par défaut de la div au lieu de seulement sur l'état de survol, mais avec un arrière-plan entièrement transparent et une transition sur la couleur d'arrière-plan. En survolant le div, je change la couleur d'arrière-plan du pseudo-élément pour qu'il soit moins transparent. Grâce à la transition, il s'estompe bien.

La technique est fondamentalement la même que celle de @Ana, mais peut-être un peu plus intuitive car je n'utilise pas le background-color: inherit;. De plus, si le div devenait plus grand que l'image d'arrière-plan, vous n'obtiendrez pas la `` double obscurité '' sur les bords, comme démontré ici http://codepen.io/anon/pen/cjoHr contre ici http://jsfiddle.net/Pevara/N2U6B/3/

5
Pevara