动画固体背景颜色的图像

Question

我有一组div，我希望他们每个人都有不同的背景颜色，而在悬停过渡到所选url的背景图像。到目前为止，我已经设法找到了光滑颜色的代码->图像过渡，但这需要在HTML中实际的img代码，我需要这些div，因为我将在其中放置文本。

是否有机会有一个平滑的0.5s或更少的过渡从背景颜色到背景图像与CSS?

Answer 1

你不能用CSS3过渡将background属性从纯色变为图像。

为了达到预期的效果，你需要用纯色背景色渐变一个图层。您可以使用伪元素来最小化纯色图层的标记。

下面是一个例子:

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>

Answer 2

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