CSS从背景颜色过渡到背景图像

Question

我正在从b转换为a。我尝试了各种选项......但是当页面转换为背景图像时，它似乎需要一些background-color，并设置background-image ..并且图像永远不会显示。这是我的CSS：

background-color

我正在使用渐变混合背景颜色和背景图像。

在这里小提琴：https://jsfiddle.net/7god9hoL/

Answer 1

诀窍在于使背景图像透明化。这可以通过使用覆盖主要元素的伪元素（例如:before）来实现（因此absolute positioninig和top，left，bottom， right设置为0）。然后，作为动画，您只需更改此伪元素的opacity。这是一个简单的例子：

（运行代码段后悬停在广场上）

＆＃13;

＆＃13;

div {
  width: 200px;
  height: 200px;
  background: red;
  position: relative;
  z-index: 1;
}
div:before {
  content: "";
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  background: url('http://www.bestmanspeechestoasts.com/wp-content/themes/thesis/rotator/sample-4.jpg');
  opacity: 0;
  transition: all 1s;
}
div:hover:before {
  opacity: 1;
}

＆＃13;

<div></div>

＆＃13;

＆＃13;

＆＃13;