CSS3 知识量：11 - 43 - 138
背景裁剪属性即background-clip，用于定义背景图像的裁剪区域，功能上与background-origin类似。其语法为：
background-clip:border-box||padding-box||content-box
参数简要说明如下：
border-box 是默认值，表示背景图像从元素的border区域向外裁剪，即元素边框之外的图像都将被裁剪掉。
padding-box 表示背景图像从padding区域向外裁剪，即元素padding区域之外的图像将被裁剪掉。
content-box 表示背景图像从content区域向外裁剪，即元素内容区域之外的图像将被裁剪掉。
下面是背景裁剪属性的应用示例：
<!DOCTYPE html>
<html>
<head>
<title>背景</title>
<meta charset="UTF-8">
<style type="text/css">
div p{
width: 350px;
height: 120px;
border: 10px dashed #F7A35C;
background: #90ED7D url(pic/background.jpg) no-repeat left top;
padding: 10px;
margin-bottom: 40px;
}
div p:nth-of-type(1){
background-clip: padding-box;
}
div p:nth-of-type(2){
background-clip: border-box;
}
div p:nth-of-type(3){
background-clip: content-box;
}
</style>
</head>
<body>
<h2>The Three Little Pigs</h2>
<div>
<span>padding-box:</span>
<p>Once upon a time there were three little pigs and the time came
for them to leave home and seek their fortunes.</p>
<span>border-box:</span>
<p>Before they left, their mother told them " Whatever you do , do it the best
that you can because that's the way to get along in the world.</p>
<span>content-box:</span>
<p>The first little pig built his house out of straw because it was the
easiest thing to do.</p>
</div>
</body>
</html>显示的效果为：（文本背景默认是绿色）
background-clip属性还有一个text属性，可以用于实现背景图片填充文本的效果，但是目前可能只有Webkit内核的浏览器（例如：Chrome）支持，因此需要使用Webkit内核的私有属性语法。
下面是一个示例：
<!DOCTYPE html>
<html>
<head>
<title>背景</title>
<meta charset="UTF-8">
<style type="text/css">
div p{
width: 500px;
font-size: 50px;
border: 10px dashed #F7A35C;
background: #90ED7D url(pic/m.jpg) no-repeat;
padding: 10px;
margin-bottom: 40px;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent; /*不可省略*/
}
</style>
</head>
<body>
<div>
<p>Once upon a time there were three little pigs and the time came
for them to leave home and seek their fortunes.</p>
</div>
</body>
</html>显示的效果和引用的原图片如下：
Copyright © 2017-Now pnotes.cn. All Rights Reserved.
编程学习笔记 保留所有权利
MARK:3.0.0.20240214.P35
From 2017.2.6