CSS蒙版效果

CSS蒙版

参考地址
显示效果

想要实现一个CSS蒙版效果达到一下效果
CSS蒙版效果_第1张图片

准备的原图如下:
CSS蒙版效果_第2张图片

实现起来比较简单,使用到了一个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%;

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

整体代码如下:

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>

你可能感兴趣的:(前端,css,前端)