背景图像和背景颜色之间的 CSS 过渡答案

【问题标题】：CSS transition between background image and background color背景图像和背景颜色之间的 CSS 过渡
【发布时间】：2023-03-10 07:09:01
【问题描述】：

我正在尝试在带有背景图像的面板上进行基本的缓出过渡。我希望它在悬停时淡出背景颜色。我尝试过使用各种不工作的转换。我试过了（我认为可行）：

transition:background-image 0.2s ease-in-out;

.panel {
  width:200px;
  height:200px;
  background:#000 url("https://cdn.pixabay.com/photo/2016/03/28/12/35/cat-1285634_1280.png") no-repeat center center / cover;
  transition:background-image 0.2s ease-in-out;
}
.panel:hover {
  background:#000;
  transition:background-image 0.2s ease-in-out;
}

&lt;div class="panel"&gt;&lt;/div&gt;

【问题讨论】：

标签： css css-transitions

【解决方案1】：

您可以使用此代码：

演示在这里：https://output.jsbin.com/yadiwoviwe

.panel {
  position: relative;
  background: rgba(0,0,0,0) url(https://cdn.pixabay.com/photo/2016/03/28/12/35/cat-1285634_1280.png) no-repeat center center / cover;
  width:200px;
  height:200px;
  transition: background-color 0.2s ease-in-out;
}
.panel:hover {
  background-color: rgba(0,0,0,.5);
}
.panel:before {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background-color: inherit;
  content: ' ';
}

【讨论】：

这可行，但如果我想在面板 div 中添加任何文本内容，它也会淡出。

【解决方案2】：

很遗憾，您不能以这种方式进行。

原因是您正在尝试为 background-image 属性设置动画 - 一个不可动画的属性。

相反，您可以使用一个很酷的小技巧，使用伪元素来创建背景图像：

.panel {
  width: 200px;
  height: 200px;
  position: relative;
  background: pink;
}

.panel::after {
  content: "";
  position: absolute;
  pointer-events: none;
  background: url(https://unsplash.it/200) center center no-repeat;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  will-change: opacity;
  transition: opacity .1s ease-out;
}

.panel:hover::after {
  opacity: 0.5;
}

&lt;div class="panel"&gt;&lt;/div&gt;

灵感来自 CSSTricks 上的 this cool little article

【讨论】：

【解决方案3】：

或者，您可以控制图像的不透明度。

.panel {
  width: 200px;
  height: 200px;
  background: #000;
  position: relative;
  color: white;
  text-align: center;
}

.panel:after {
  content: "";
  background-image: url('https://cdn.pixabay.com/photo/2016/03/28/12/35/cat-1285634_1280.png');
  background-size: 200px 200px;
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 200px;
  opacity: 1;
  transition: opacity 0.2s ease-in-out;
}

.panel:hover:after {
  opacity: 0;
}

&lt;div class="panel"&gt;&lt;h1&gt;Text&lt;/h1&gt;&lt;/div&gt;

【讨论】：

【解决方案4】：

过时的答案，当前使用 CSS 的图像过渡。

-webkit-transition: all 1s ease-out;  
-moz-transition: all 1s ease-out;  
-o-transition: all 1s ease-out;  
transition: all 1s ease-out;

background-image 而不是“all”，你会看到的。

【讨论】：