CSS蒙版效果

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%;
1
2
3
4
5
6
7
8

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

整体代码如下：

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

相关阅读:
【微服务】Gunicorn服务器替换Flask自带的WSGI Server服务器
AI加速器与机器学习算法：协同设计与进化
链接概念介绍
计算机毕业设计（附源码）python智慧停车系统
移动设备管理（MDM）：密码管理
通俗解释魔法命令
codereview指南：使用 vs code 插件 gitlens 对比不同分支代码
用原生input type=range 写一个滑块，兼容各大浏览器
如何使用Jmeter进行http接口测试？
三维GIS可视化技术在城市管理中的作用

原文地址：https://blog.csdn.net/xo19882011/article/details/133737446