Superposer une image de fond avec une couleur rgba, avec une transition CSS3

Plus tôt aujourd'hui, j'ai demandé à Superposition d'une image de fond d'écran avec une rgba couleur d'arrière-plan. Mon but est d'avoir un div avec un background-image, et quand quelqu'un passe le div, le background-image se superpose avec une couleur rvba. Dans la réponseune solution avec :after a été donnée:

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

Maintenant, je voudrais avoir la même chose, mais avec une transition CSS: j'aimerais que la couleur d'arrière-plan à l'évanouissement. J'ai essayé d'ajouter transition: all 1s; à la #the-div CSS, mais cela ne fonctionne pas. J'ai aussi essayer de l'ajouter à #the-div:hover et #the-div:aftermais cela ne fonctionne pas non plus.

Est-il un pur CSS de manière à ajouter une décoloration en superposition à une div avec un background-image?

source d'informationauteur Keelan

  1. 27

    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: ' ';
}

    Ce que je fais ici?

    Ce que je fais ici, c'est que je suis en train d'un RGBa background-color sur le divderrière son background-image et la transition ce background-color (alpha) sur :hover. Tout cela se passe derrière la background-image. Cependant, je suis également en utilisant background-color: inherit sur le pseudo-élément, ce qui signifie que, à un moment donné, le pseudo-élément, qui est situé au-dessus de son parent div (et donc au-dessus de la background-image de la div) va avoir le même background-color (ce qui signifie que le background-color de la pseudo-élément est d'aller à la transition de la 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 suis pas la transition directement le background-color de la pseudo-élément, c'est que le soutien des transitions sur les pseudo-éléments n'est toujours pas bon encore.

    Soutien pour les transitions sur les pseudo-éléments

    ✓ Firefox prend en charge les transitions sur les pseudo-éléments et les a soutenus pendant un certain temps, nous allons obtenir ce hors de la voie d'abord.

    ✗ Les versions actuelles de Safari et Opéra ne prennent pas en charge les transitions sur les pseudo-éléments.

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

    IE10 les prend en charge dans un peu d'une manière bizarre, ce qui signifie que quelque chose comme:

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

    ne fonctionne pas, vous devez spécifier l'état de pointage sur l'élément lui-même. Comme ceci:

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

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

    MODIFIER

    Transitions directement sur les pseudo-éléments sont maintenant pris en charge dans l'Opéra depuis le passage à Clignoter et Safari depuis 6.1.

  2. 4

    Allthough @Ana technique est aussi très agréable, et fonctionne très bien, permettez-moi de modifier légèrement ma réponse à la question précédenteet ajouter de 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 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 pointage, mais avec un fond transparent, et une transition sur la couleur d'arrière-plan. Sur le vol stationnaire de la div, j'ai changer la couleur d'arrière-plan de la pseudo-élément moins transparente. Grâce à la transition, il s'estompe bien.

    La technique est essentiellement la même chose que @Ana a fait, mais peut-être un peu plus intuitive car je n'utilise pas le background-color: inherit;. Aussi, si la div seraient devient plus grand que l'image de fond, vous ne seriez pas obtenir le double des ténèbres " sur les bords, comme démontré ici http://codepen.io/anon/pen/cjoHr contre ici http://jsfiddle.net/Pevara/N2U6B/3/