Skip to content
待添加

CSS蒙版

想要实现一个CSS蒙版效果达到一下效果

准备的原图如下:

实现起来比较简单,使用到了一个css特性。

mask-image: radial-gradient(white 0%, transparent 70%);
mask-repeat: no-repeat; 
mask-position: center;
mask-size: 100%;
-webkit-mask-image: radial-gradient(white 0%, transparent 70%);
-webkit-mask-repeat: no-repeat; 
-webkit-mask-position: center;
-webkit-mask-size: 100%;

本例子使用了一个圆形渐变色,如果想使用图片的话可以把地址改成蒙版图片的样式。

整体代码如下:

html
<!DOCTYPE html>
<head>
  <style>
    .image-mask {
      mask-image: radial-gradient(white 0%, transparent 70%);
      mask-repeat: no-repeat; 
      mask-position: center;
      mask-size: 100%;
      -webkit-mask-image: radial-gradient(white 0%, transparent 70%);
      -webkit-mask-repeat: no-repeat; 
      -webkit-mask-position: center;
      -webkit-mask-size: 100%;
      width: 800px;
      height: 600px;
      margin: 40px;
    }
  </style>
</head>
<body>
  <img class="image-mask" src="./aaa.png"></img>
</body>