背景图像和背景颜色之间的CSS过渡 [英] CSS transition between background image and background color

问题描述

我正在尝试在带有背景图像的面板上进行基本的过渡过渡.我希望它在悬停时褪色为背景色.我尝试使用各种转换，但都无法正常工作.我已经尝试过(我认为这样可以奏效):

I'm trying to do a basic ease out transition on a panel with a background image. I'm wanting it to fade to background color on hover. I've tried using various transitions non of which are working. I've tried (which i thought would work):

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;
}

<div class="panel"></div>

推荐答案

您可以使用以下代码:

演示在这里: 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: ' ';
}

这篇关于背景图像和背景颜色之间的CSS过渡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！