css 将固体背景色动画化为图像

0s7z1bwu  于 2023-05-02  发布在  其他
关注(0)|答案(2)|浏览(120)

我有一组div,我希望每个div都有不同的背景颜色,当鼠标悬停时,切换到所选url的背景图片。到目前为止,我已经设法找到了平滑的颜色-〉图像过渡的代码,但这需要一个实际的HTML img代码,我需要这些div,因为我将把它们的文本。
有没有机会顺利0。5s或更少用CSS从背景颜色过渡到背景图像?

t40tm48m

t40tm48m1#

您不能使用CSS3转换background属性从纯色设置为图像
要实现所需的行为,您将需要淡入/淡出一个层与您的固体背景颜色。您可以使用伪元素来最小化纯色latyer层的标记。
下面是一个例子:

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>
kulphzqa

kulphzqa2#

这应该让你开始= 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');
}

相关问题