Overlay a background-image with an rgba color, with a CSS3 transition

前端 未结 2 1160
被撕碎了的回忆
被撕碎了的回忆 2021-01-31 11:13

Earlier today I asked Overlay a background-image with an rgba background-color. My goal is to have a div with a background-image, and when someone hovers the div, the background

相关标签:
2条回答
  • 2021-01-31 11:36

    Yes, it is possible.

    demo

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

    What am I doing here?

    What I am doing here is that I am setting a RGBa background-color on the div, behind its background-image and transitioning this background-color (its alpha) on :hover. All this happens behind the background-image. However, I am also using background-color: inherit on the pseudo-element, which means that, at any given moment, the pseudo-element, which is situated above its parent div (and therefore above the background-image of the div) is going to have the same background-color (meaning that the background-color of the pseudo-element is going to transition from rgba(0,0,0,0) to rgba(0,0,0,.5) on :hover).


    Why do it this way?

    The reason why I am not transitioning directly the background-color of the pseudo-element is that support for transitions on pseudo-elements is still not that good yet.

    Support for transitions on pseudo-elements

    ✓ Firefox supports transitions on pseudo-elements and has supported them for quite a while, let's get this out of the way first.

    Current versions of Safari and Opera don't support transitions on pseudo-elements.

    Chrome supports transitions on pseudo-elements only starting from version 26.

    IE10 supports them in a bit of a weird way, meaning that something like:

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

    won't work, you have to specify the hover state on the element itself as well. Like this:

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

    More info and examples about how you can transition various properties of pseudo-elements using this inherit technique: http://vimeo.com/51897358


    EDIT

    Transitions directly on pseudo-elements are now supported in Opera since the switch to Blink and in Safari since 6.1.

    0 讨论(0)
  • 2021-01-31 11:50

    Allthough @Ana technique is also nice, and works fine, allow me to slightly alter my answer to the previous question, and add the transition in that 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);   
    }
    

    What I did is i defined the :after pseudo element on the default state of the div in stead of only on the hover state, but with a fully transparent background, and a transition on the background color. On hover of the div, I change the background color of the pseudo element to be less transparent. Thanks to the transition it fades in nicely.

    The technique is basicly the same as what @Ana did, but perhaps a bit more intuitive because I don't use the background-color: inherit;. Also if the div would becomes bigger then the background image, you would not get the 'double darkness' on the edges, as demonstrated here http://codepen.io/anon/pen/cjoHr versus here http://jsfiddle.net/Pevara/N2U6B/3/

    0 讨论(0)
提交回复
热议问题