css悬停以清除背景上的线性渐变失败

Question

我想清除背景图像上的深色线性渐变，但是尝试了一下它不起作用，而且还有闪烁的问题。

.image {
  background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.8)), url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/owl1.jpg') center no-repeat;
  background-size: cover;
  width: 100px;
  height: 100px;
  border-radius: 10px;
  transition: background 0.2s ease;
}

.image:hover {
  background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/owl1.jpg') center no-repeat;
  background-size: cover;
}

<div class="image">
</div>

Answer 1

尝试使用：before

.image {
  position:relative;
  background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/owl1.jpg') center no-repeat;
  background-size: cover;
  width: 100px;
  height: 100px;
  border-radius: 10px;
}
.image:before{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  content:'';
  border-radius: 10px;
  opacity:1;
  background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.8));
  transition: opacity 0.2s ease;
}
.image:hover:before{
  opacity:0;
}

<div class="image"></div>

Answer 2

另一种解决方案：过渡：背景色0.2s缓解；

.image 
{
  background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.8)), url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/owl1.jpg') center no-repeat;
  background-size: cover;
  width: 100px;
  height: 100px;
  border-radius: 10px;
  transition: background-color 0.2s ease;
}

.image:hover 
{
  background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/owl1.jpg') center no-repeat;
  background-size: cover;
}

<div class="image">
</div>