我有一组 div，我希望它们每个都有不同的背景颜色，而悬停时过渡到背景图像所选网址的。到目前为止，我已经成功找到了平滑颜色 -> 图像转换的代码，但这需要 HTML 中的实际 img 代码，并且我需要这些 div，因为我将在其中放入文本。
有没有机会平滑0.5s或更短使用 CSS 从背景颜色过渡到背景图像？
你不能动画化background从纯色到图像的属性与 CSS3 过渡。
为了实现所需的行为，您需要淡入/淡出具有纯色背景色的图层。您可以使用伪元素来最小化纯色图层的标记。
这是一个例子：
div {
position: relative;
width: 250px;
height: 250px;
background: url(https://picsum.photos/250);
}
div:after {
content: '';
position: absolute;
left: 0; top: 0;
width: 100%; height: 100%;
background: gold;
opacity: 1;
transition: opacity .5s;
}
div:hover:after {
opacity: 0;
}
<div></div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
