且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

css 过渡不透明度淡入淡出背景

更新时间:2022-12-18 22:32:40

用黑色背景的 span 元素包裹你的图片.

Wrap your image with a span element with a black background.

.img-wrapper {
  display: inline-block;
  background: #000;
}

.item-fade {
  vertical-align: top;
  transition: opacity 0.3s;
  -webkit-transition: opacity 0.3s;
  opacity: 1;
}

.item-fade:hover {
  opacity: 0.2;
}

<span class="img-wrapper">
   <img class="item-fade" src="https://via.placeholder.com/100x100/cf5" />
</span>