CSS3基础背景新属性background-clip和background-origin

背景新属性background-clip和background-origin

在CSS3中,给背景又增加了绘制区域这项属性(background-clip),下面先创建一个最简单的框:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS3测试</title>
<style type="text/css">
#a1 {
 background:#39D8B8;
 padding:40px;
 border:10px dashed #000;
 width:300px;height:200px;
}
</style>
</head>
<body>
<div id="a1">
西门吹雪是古龙武侠小说《陆小凤传奇》系列人物之一,陆小凤的挚友之一,剑术超绝,剑路锋锐犀利。
</div>
</body>
</html>

浏览这个网页,可以看到内容离虚线边框有40px的内边距,而背景颜色包含了边框的部分,这是因为background-clip属性默认值为border-box,它表示背景绘制在包含边框的框内。

该属性的另外两个值background-clip:padding-box表示背景绘制在含内边距的框内,而background-clip:content-box则表示背景绘制在内容框内。

下面我们来试试他们的区别:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS3测试</title>
<style type="text/css">
div {
 background:#39D8B8;
 padding:40px;margin:10px;
 border:10px dashed #000;
 width:100px;height:180px;
 float:left;
}
#a2 {background-clip:padding-box;}
#a3 {background-clip:content-box;}
</style>
</head>
<body>
<div id="a1">
西门吹雪是古龙武侠小说《陆小凤传奇》系列人物之一,陆小凤的挚友之一,剑术超绝,剑路锋锐犀利。
</div>
<div id="a2">
西门吹雪是古龙武侠小说《陆小凤传奇》系列人物之一,陆小凤的挚友之一,剑术超绝,剑路锋锐犀利。
</div>
<div id="a3">
西门吹雪是古龙武侠小说《陆小凤传奇》系列人物之一,陆小凤的挚友之一,剑术超绝,剑路锋锐犀利。
</div>
</body>
</html>

浏览这个网页,很容易就发现三个框关于背景的显示区别了:

背景绘制区域.png

英文单词clip是修剪的意思,大家可以自己试试体会一下该属性是怎么“修剪”背景的。

在CSS3中,背景还增加了background-origin属性,它的作用是规定background-position属性相对于什么位置来定位,英文单词origin的含义是“起点”。

与上文所述的background-clip属性类似,background-origin属性也有padding-box,border-box,content-box这三个属性,但它的默认值是padding-box,也就是说默认情况下,背景图像相对于填充框的位置来定位,我们还是以实例来看看它们的区别吧:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS3测试</title>
<style type="text/css">
div {background:#fff url(bglzl.png);
padding:40px;margin:10px;
border:10px dashed #000;
width:100px;height:180px;
float:left;
}
#a2 {background-origin:border-box;}
#a3 {background-origin:content-box;}
</style>
</head>
<body>
<div id="a1">
西门吹雪是古龙武侠小说《陆小凤传奇》系列人物之一,陆小凤的挚友之一,剑术超绝,剑路锋锐犀利。
</div>
<div id="a2">
西门吹雪是古龙武侠小说《陆小凤传奇》系列人物之一,陆小凤的挚友之一,剑术超绝,剑路锋锐犀利。
</div>
<div id="a3">
西门吹雪是古龙武侠小说《陆小凤传奇》系列人物之一,陆小凤的挚友之一,剑术超绝,剑路锋锐犀利。
</div>
</body>
</html>

背景定位区域.png

大家可以试试用不同的图片背景来感受一下background-origin的几个定义值有什么区别。

站长Colin Gao,85后自由职业者,爱钻研,爱学习网页设计。建立本站的目的是整理学习笔记,分享学习经验,认识更多的朋友。感谢您阅读本站的文章,部分内容参考了网上的一些教程,但我会尽量根据自己的理解写更多原创的东西,本站网址如下,欢迎转载:
如果方便的话,转载请注明来自:http://www.flooren.com.cn/css3/26.html