[分享]css3图片加蒙版

CSS3图片加蒙版是一种通过CSS3技术实现的图片效果，它可以给图片一个特殊的遮罩效果，使图片看起来更加精美。实现这种效果需要使用CSS3中的mask属性，以及一些基本的CSS样式。.maskedim...

CSS3图片加蒙版是一种通过CSS3技术实现的图片效果，它可以给图片一个特殊的遮罩效果，使图片看起来更加精美。实现这种效果需要使用CSS3中的mask属性，以及一些基本的CSS样式。

.masked-img {
  position: relative; 
  display: inline-block; 
}
.masked-img::before {
  content: ""; 
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%;
  background-color: rgba(0,0,0,0.5); 
  opacity: 0; 
  transition: opacity 0.3s ease-in-out; 
}
.masked-img:hover::before {
  opacity: 1; 
}
.masked-img img {
  display: block; 
  height: auto; 
  max-width: 100%; 
  margin: 0 auto; 
  position: relative; 
  z-index: 1; 
} 

上面的代码会创建一个包含一个图片的div元素，通过在其上面添加一个伪元素，设置其背景色和透明度，实现图片的遮罩效果。同时，使用CSS3中的transition属性指定一个动画过渡，当鼠标悬停在图片上时，调整背景色透明度实现图片遮罩渐变的效果。使用:hover选择器确保只有当鼠标悬停在图片上时，才会出现遮罩效果。