您现在的位置是：首页 > 博客网站制作 > CSS3|Html5CSS3|Html5

css3背景(六)—background-clip

杨青发布时间：2013-08-01【CSS3|Html5】人已围观

简介background-clip用来制作文字的遮罩效果还是不错的，目前只有Safari 和Chrome浏览器支持该属性。background-clip说明：background-clip 指定对象的背景图像向外裁剪的区域。1）padding-box：从padding区域（不含padding）开始向外裁剪背景。

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>

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

<h2>border-box</h2>

<p>从border区域（不含border）开始向外裁剪背景</p>

</li>

<h2>padding-box</h2>

<p>从padding区域（不含padding）开始向外裁剪背景</p>

</li>

<h2>content-box</h2>

<p>从content区域开始向外裁剪背景</p>