简单CSS过渡-没有任何作用

Question

我正在处理一张带有渐变的图片，希望在鼠标悬停时消失。但是，我无法使其过渡效果生效。我已经尝试了我所知道的所有webkit过渡效果，但似乎都不起作用。

以下是HTML代码：

<a href="http://calvarygigharbor.com/heavenly-hitters/">
<div class="tinted-image"> </div></a>

使用这个CSS：

.tinted-image {
 -webkit-transition: all .7s ease;
transition: all .7s ease;
position: relative;
width: 100%;
padding-top: 56.25%; /* 16:9 Aspect Ratio */
border-radius: 10px;

background:  
linear-gradient(
  rgba(255, 0, 0, 0.6), 
  rgba(237,240,0,0.6)
),
/* image */
url(http://calvarygigharbor.com/wp-content/uploads/2018/05/church-softball-2018.jpg);
background-size: contain;
}

.tinted-image:hover {
 -webkit-transition: all .7s ease;
transition: all .7s ease;
position: relative;
width: 100%;
padding-top: 56.25%; /* 16:9 Aspect Ratio */
border-radius: 10px;
background: 

/* image */
url(http://calvarygigharbor.com/wp-content/uploads/2018/05/church-softball-2018.jpg);
background-size: contain;
}

图片和悬停效果非常好，但是没有过渡效果。您如何使过渡效果与此起作用？

网址：http://calvarygigharbor.com/css-testing/

- Rebekah Parkhurst

---

你没有覆盖你的hover类中的linear-gradient属性。试着用这个替换整个背景行：background-color: transparent; 另外，你不需要复制你原来的.tinted-image类中的样式，因为它们已经被继承到了hover类中。我希望这样能让事情更清楚。如果没有，请告诉我，我可以用另一种方式来解释。 - MForMarlon

@MForMarlon 使用 background-color 不起作用，因为渐变不是颜色而是图像...即使您使用透明颜色定义另一个渐变也不起作用，因为我们无法在渐变上进行过渡。 - Temani Afif

Answer 1

您无法在渐变上应用过渡效果，您可以尝试在background-size上添加过渡效果。使用不同的background-size值来调整过渡效果的工作方式，您还可以更改background-position：

.tinted-image {
  -webkit-transition: all .7s ease;
  transition: all .7s ease;
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  /* 16:9 Aspect Ratio */
  border-radius: 10px;
  background: linear-gradient( rgba(255, 0, 0, 0.6), rgba(237, 240, 0, 0.6)),
  /* image */
  url(http://calvarygigharbor.com/wp-content/uploads/2018/05/church-softball-2018.jpg);
  background-size:100% 100%, contain;
  background-position:center,center; /*OR [left,center] OR [top,center] ...*/ 
  background-repeat:no-repeat;
}

.tinted-image:hover {
  -webkit-transition: all .7s ease;
  transition: all .7s ease;
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  /* 16:9 Aspect Ratio */
  border-radius: 10px;
  background-size:0 0,contain; /* OR [100% 0,contain] OR [0 100%,contain] */
}

<a href="http://calvarygigharbor.com/heavenly-hitters/">
  <div class="tinted-image"> </div>
</a>

- Temani Afif