css3背景(六)—background-clip

2024年04月14日 css3 css background clip 文字遮罩 遮罩 懒猪技术

background-clip

说明:background-clip 指定对象的背景图像向外裁剪的区域。

1padding-box:从padding区域(不含padding)开始向外裁剪背景。

2border-box:从border区域(不含border)开始向外裁剪背景。

3content-box:从content区域开始向外裁剪背景。

4text:从前景内容的形状(比如文字)作为裁剪区域向外裁剪,如此即可实现使用背景作为填充色之类的遮罩效果

用法:

从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/

展开阅读全文
相关内容