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/

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

1 个答案: