2024年04月14日 css3 css background clip 文字遮罩 遮罩 懒猪技术
background-clip
说明：background-clip 指定对象的背景图像向外裁剪的区域。
1）padding-box：从padding区域（不含padding）开始向外裁剪背景。
2）border-box：从border区域（不含border）开始向外裁剪背景。
3）content-box：从content区域开始向外裁剪背景。
4）text：从前景内容的形状（比如文字）作为裁剪区域向外裁剪，如此即可实现使用背景作为填充色之类的遮罩效果
用法：
从border区域（不含border）开始向外裁剪背景
div
{
background:url(bg.gif);
background-repeat:no-repeat;
background-clip:border-box;
}
兼容性：IE9, Firefox4.0-9.0, Opera11.50-11.60尚未支持text属性值
示例：演示页面
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>CSS background-clip_CSS3</title>
<style>
h1{font-size:20px;}
h2{font-size:16px;}
p{width:200px;height:200px;margin:0;padding:20px;border:10px dashed #666;background:#aaa url(/skin/blog/images/logo.jpg) no-repeat;}
.border-box p{background-clip:border-box;}
.padding-box p{background-clip:padding-box;}
.content-box p{background-clip:content-box;}
.text p{width:auto;height:auto;background-repeat:repeat;-webkit-background-clip:text;-webkit-text-fill-color:transparent;font-weight:bold;font-size:120px;}
</style>
</head>
<body>
<h1>background-clip</h1>
<ul class="test">
<li class="border-box">
<h2>border-box</h2>
<p>从border区域（不含border）开始向外裁剪背景</p>
</li>
<li class="padding-box">
<h2>padding-box</h2>
<p>从padding区域（不含padding）开始向外裁剪背景</p>
</li>
<li class="content-box">
<h2>content-box</h2>
<p>从content区域开始向外裁剪背景</p>
</li>
<li class="text">
<h2>text</h2>
<p>从前景内容的形状作为裁剪区域向外裁剪背景</p>
</li>
</ul>
</body>
</html>
css3 css background-clip 文字遮罩 遮罩
本文链接：http://so.lmcjl.com/news/2099/