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>

回答1:

You can use this code:

Demo is here: 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: ' ';
}

回答2:

Unfortunately, you can't do this in this way.

The reason is that you're trying to animate the background-image property - a property that isn't animatable.

Instead, you can use a cool little trick that uses a pseudo-element to create the background image instead:

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

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

Inspired by this cool little article on CSSTricks

回答3:

background-image is not animatable you can't add transition on a backgronund-image property. You can use other, workaround for solve this like @CGK answer

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;

回答4:

Alternatively, you can manipulate the opacity of the image.

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

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

来源：https://stackoverflow.com/questions/45415963/css-transition-between-background-image-and-background-color

标签

css

css-transitions