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%;
本例子使用了一个圆形渐变色，如果想使用图片的话可以把地址改成蒙版图片的样式。
整体代码如下：
<!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>
