css - 将 CSS3 过渡添加到子对象

Question

所以我有一个 -tag，里面有一个 div。 div 具有悬停时显示的背景图像。我想为这种影响添加一个过渡，但我无法使其正常工作。

HTML

<a class="thumbs">
  <div class="thumbsText">
    Some text
  </div>
</a>

CSS:

.thumbsText{
  -webkit-transition: background-image 1s ease-in-out;
  -moz-transition: background-image 1s ease-in-out;
  -ms-transition: background-image 1s ease-in-out;
  -o-transition: background-image 1s ease-in-out;
  transition: background-image 1s ease-in-out;
}

.thumbs a:hover .thumbsText{
  background-image: url(images/shadow.png);
}

Answer 1

您不能向 background-image 添加过渡。但是，您可以将背景图像设置为 :before 伪元素，并转换该元素的不透明度:

.thumbsText {
    position: relative;
}

.thumbsText:before{
    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -ms-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    transition: opacity 1s ease-in-out;

    background-image: url(http://placekitten.com/150/150);    
    bottom: 0;
    content: ' ';
    left: 0;
    opacity: 0;
    position: absolute;
    right: 0;
    top: 0;
}

.thumbs:hover .thumbsText::before{
    opacity: 1;
}

<a class="thumbs">
   <div class="thumbsText">
      Some text
   </div>
</a>