我有一组 div，我希望它们中的每一个都具有不同的背景颜色，并且在悬停时转换为所选 url 的背景图像。到目前为止，我已经设法找到平滑颜色的代码 -> 图像转换，但这需要 HTML 中的实际 img 代码，我需要这些 div，因为我将在其中放入文本。
是否有机会通过 CSS 实现从背景颜色到背景 url 的 0.5 秒或更短的平滑过渡？
如果您查看http://loopedmag.com，您可以看到我想在代码中重新创建的内容，但使用过渡动画颜色->图像。
【问题讨论】：
transition
标签： html css hover css-transitions
您无法使用 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;
}
【讨论】：
content 上使用::after 伪元素上的attr() 属性值。不要将文本放在 div 中。将您的文本作为该 div 上的属性（最好是 data- 属性）的值。 演示：jsfiddle.net/abhitalks/Fg78p/8
这应该可以帮助您入门 = FIDDLE。
你也可以使用JS，但这不是必需的。
CSS
.changeme {
margin: 10px auto;
width: 200px;
height: 200px;
background-color: red;
text-align: center;
line-height: 200px;
color: blue;
font-size: 30px;
}
.changeme:hover {
background-color: transparent;
background: url('http://i.imgur.com/DgYUsKY.jpg?1');
}
.changeme2 {
margin: 10px auto;
width: 200px;
height: 200px;
background-color: blue;
text-align: center;
line-height: 200px;
color: white;
font-size: 30px;
}
.changeme2:hover {
background-color: transparent;
background: url('http://i.imgur.com/BF7aTQR.jpg');
}
【讨论】：