css - 如何使用渐变和图像过渡背景图像？

Question

所以我正在制作一个网站，该网站已经具有覆盖背景图像的悬停渐变。但有一件事我似乎无法做到，那就是顺利过渡。谁能找出原因？

tl;dr:我想让渐变淡入。

这是我的 JSfiddle:clicky

CSS:

div.home_wrapper > div.header {
    width:calc(70% - 5px);
    height:calc(70% - 5px);
    position:relative;
    margin-top:5px;
    float:left;
    background-image:url(assets/13.jpg);
    background-position:bottom;
    background-repeat:no-repeat;
    background-size:cover;
    transition:background-image 0.25s ease-in-out;
}
div.home_wrapper > div.header:hover {
    background-image:-webkit-linear-gradient(rgba(0,0,0,0.01), rgba(0,0,0,0.5)), url(assets/13.jpg);
    background-image:   -moz-linear-gradient(rgba(0,0,0,0.01), rgba(0,0,0,0.5)), url(assets/13.jpg);
    background-image:     -o-linear-gradient(rgba(0,0,0,0.01), rgba(0,0,0,0.5)), url(assets/13.jpg);
    background-image:        linear-gradient(rgba(0,0,0,0.01), rgba(0,0,0,0.5)), url(assets/13.jpg);
}

Answer 1

这与 CSS3 background image transition 本质上是同一个问题

一个解决方案是引入一个额外的图层，并获得应用到图层不透明度的过渡:

HTML

<div class="home_wrapper">
    <div class="header">
        <div class="headercontent"></div>
    </div>
</div>

CSS

html, body {
    height:100%;
}
div.home_wrapper {
    width:100%;
    height:100%;
}
/*below here is the issue*/
 div.home_wrapper > div.header {
    width:calc(70% - 5px);
    height:calc(70% - 5px);
    position:relative;
    margin-top:5px;
    float:left;
    background-image:url(assets/13.jpg);
    background-position:bottom;
    background-repeat:no-repeat;
    background-size:cover;
    /*so that you can see where it is ->*/
    border:solid 1px #333;
}
.headercontent {
    display: inline-block;
    width: 100%;
    height: 100%;
    background-image:-webkit-linear-gradient(rgba(0, 0, 0, 0.01), rgba(0, 0, 0, 0.5)), url(assets/13.jpg);
    background-image: -moz-linear-gradient(rgba(0, 0, 0, 0.01), rgba(0, 0, 0, 0.5)), url(assets/13.jpg);
    background-image: -o-linear-gradient(rgba(0, 0, 0, 0.01), rgba(0, 0, 0, 0.5)), url(assets/13.jpg);
    background-image: linear-gradient(rgba(0, 0, 0, 0.01), rgba(0, 0, 0, 0.5)), url(assets/13.jpg);
    -webkit-transition: opacity 200ms linear;
    -moz-transition: opacity 200ms linear;
    -o-transition: opacity 200ms linear;
    -ms-transition: opacity 200ms linear;
    transition: opacity 200ms linear;
    opacity: 0;
}
div.headercontent:hover {
    -webkit-transition: opacity 200ms linear;
    -moz-transition: opacity 200ms linear;
    -o-transition: opacity 200ms linear;
    -ms-transition: opacity 200ms linear;
    transition: opacity 200ms linear;
    opacity: 1;
}

参见 http://jsfiddle.net/raad/tdabsmsL/