您当前的位置：首页 > 网站制作 > 前端设计

css3背景(六)—background-clip

时间：2020-08-23来源：杨青青个人博客作者：杨青青

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>