前端HTML背景蒙板

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div{
				width: 600px;
				height: 600px;
				background: url(img/1.png);
				border: 3px solid gold;
				/*背景蒙板*/
				-webkit-mask-image: url(img/heart.png) ;
				/*蒙板尺寸*/
				-webkit-mask-size: 50px;
				/*蒙板平铺效果*/
				-webkit-mask-repeat:no-repeat;
				/*蒙板的位置*/
				-webkit-mask-position: center;
				/*也可以裁剪等 参考背景图片属性讲解即可 */
				/*综合写法 注意 背景图片属性也支持同时放置多张背景图片*/
				-webkit-mask:top url(img/heart.png),bottom url(img/nike.png);
				-webkit-mask-size:60px;
			}
		</style>
	</head>
	<body>
		<!--
			背景蒙板
			蒙板属性的兼容性比较差 只对webkit内核的浏览器有效果
			1.充当背景蒙板的图片格式必须是png
			2.设置成蒙板的图片 系统会把原本不透明的得部分变透明 
			把原本透明的
		-->
		<div class="">
			
		</div>
	</body>
</html>

运行结果：

前端三剑客
#HTML
前端HTML背景蒙板
http://ultracode.cn/2020/10/21/HTML/前端HTML背景蒙板/
作者
Win
发布于
2020年10月21日
许可协议