CSS蒙版效果

最新推荐文章于 2023-11-03 13:36:04 发布

xyccstudio

最新推荐文章于 2023-11-03 13:36:04 发布

阅读量832

点赞数

分类专栏：前端文章标签： css 前端

本文链接：https://blog.csdn.net/xo19882011/article/details/133737446

版权

前端专栏收录该内容

22 篇文章 0 订阅

订阅专栏

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>