我有一组 div,我希望每个 div 都具有不同的背景颜色,并且在悬停时过渡到所选 url 的背景图像。到目前为止,我已经找到了平滑颜色 -> 图像过渡的代码,但这需要 HTML 中的实际 img 代码,我需要这些 div,因为我将在其中放置文本。
是否有机会通过 CSS 实现从背景颜色到背景 url 的平滑 0.5 秒或更短的过渡?
如果你看http://loopedmag.com您可以看到我想在代码中重新创建的内容,但使用过渡动画 color->image。
最佳答案
您不能使用 CSS3 过渡将 background
属性从纯色动画化为图像。
要实现所需的行为,您需要使用纯色背景淡入/淡出图层。您可以使用伪元素来最小化该层的标记。
HTML :
<div class="one"></div>
<div class="two"></div>
CSS:
body,html{
height:100%;
}
div{
height:50%;
width:50%;
position:relative;
background-size:cover;
}
.one{
background: url(http://lorempixel.com/output/fashion-q-c-640-480-3.jpg);
}
.two{
background: url(http://lorempixel.com/output/people-q-g-640-480-7.jpg);
}
div:after{
content:'';
position:absolute;
left:0; top:0;
width:100%;
height:100%;
background:gold;
opacity:1;
-webkit-transition: opacity .5s;
transition: opacity .5s;
}
div:hover:after{
opacity:0;
}
关于html - 背景颜色和背景图像 CSS3 之间的过渡,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23990749/