[分享]css3图片带遮罩

CSS3中的图片遮罩功能是相当有用的。通过使用遮罩，可以将图片的透明度、颜色、混合模式等进行处理，从而实现更加丰富多彩的效果。.mask { width: 300px; height: 300px; ...

CSS3中的图片遮罩功能是相当有用的。通过使用遮罩，可以将图片的透明度、颜色、混合模式等进行处理，从而实现更加丰富多彩的效果。

.mask {
  width: 300px;
  height: 300px;
  background-image: url('image.png');
  background-size: cover;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0));
  mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0));
}

上述代码是一个简单的图片遮罩示例， .mask 是容器的类名，其中使用了一个由上到下渐变的线性遮罩来遮盖图片。

.mask {
  width: 300px;
  height: 300px;
  background-image: url('image.png');
  background-size: cover;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 60%);
  mask-image: radial-gradient(circle at 50% 50%, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 60%);
}

如果想要创建一个更加独特的遮罩，可以使用径向渐变来实现。下面这段代码就展示了如何创建一个以圆形为中心点的径向渐变遮罩 :

在CSS3中，还有很多其他的图片遮罩效果，如多个遮罩混合使用、三维动画遮罩等等。我们可以根据实际需求来选择不同的方式，从而实现更加精美的效果。