[分享]css3图片透明度过渡

CSS3是当前最新的CSS标准，其中一个新的功能便是图片透明度的过渡动画效果。以前，我们可能需要借助JavaScript来实现这样的效果，但是现在我们可以使用CSS3的opacity属性来轻松实现图片...

CSS3是当前最新的CSS标准，其中一个新的功能便是图片透明度的过渡动画效果。以前，我们可能需要借助JavaScript来实现这样的效果，但是现在我们可以使用CSS3的opacity属性来轻松实现图片的渐变效果。

//HTML代码结构
<div class="img-container">
  <img src="example.jpg" alt="示例图片">
</div>

//CSS代码
.img-container {
  position: relative;
}
.img-container:before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background-color: black;
  opacity: 0;
  transition: opacity .3s ease-in-out;
}
.img-container:hover:before {
  opacity: .5;
}
.img-container img {
  position: relative;
  z-index: 2;
} 

上面的代码中，我们首先给.img-container设置了position: relative，接着使用:before伪元素来创建一个黑色的半透明层，这个层设置为opacity: 0，并且 transition 属性声明了该效果渐变过度的时间为0.3秒，渐变的时间时刻采用了ease-in-out函数，这样显示与隐藏的时候渐变效果更加明显、自然。

当鼠标悬停到.img-container上面时，我们通过:hover选择器来给:before元素添加一个opacity: .5的样式，使黑色半透明层逐渐显现出来，从而产生了一个渐变的效果。最后，我们再将原始图片的z-index值设置为比半透明层要更高的值，确保图片能够显示在半透明层之上。

总的来说，CSS3的图片透明度过渡效果可以让我们在不借助JavaScript的情况下轻松实现动态效果。同时，我们需要注意到不同浏览器对于CSS3的兼容性不一致，所以我们需要使用浏览器前缀的方式来确保这个过渡效果能够在不同浏览器中正常运行。