admin 管理员组

文章数量: 1184232

CSS背景属性,background

一.background-origin

background-origin用来控制背景图片的位置

他有两个值:

                        padding-box(默认):指定背景图片由padding开始展示

                        content-box:指定背景图片在内容区域开始展示

                        border-box:指定背景图片在边框区域开始展示

1.background-origin:padding-box(默认值);

在我们给一个盒子设置了背景图片时这个背景图片默认是从padding开始展示的

.box{width: 600px;height: 500px;padding: 50px;border:20px dotted blueviolet;background: url(img/img.jpg) no-repeat;}

此时网页呈现:

可以看到我已经给此盒子设置了padding:50px;但是我们看到背景图片扔紧贴边框展示

这就是background-origin默认值padding-box呈现的效果.

2.background-origin:content-box;

现在我给盒子的background-origin改变为content-box

.box{width: 600px;height: 500px;padding: 50px;border:20px dotted blueviolet;background: url(img/img.jpg) no-repeat;background-origin: content-box;}

 


 

可以从控制台看到此时背景 图片是在内容区域开始展示这就是background-origin:content-box;的使用了

3.background-origin:border-box;

这个属性是指定背景图片从边框开始展示

.box{width: 600px;height: 500px;padding: 50px;border:20px dotted blueviolet;background: url(img/img.jpg) no-repeat;/* background-origin: content-box; */background-origin: border-box;}

现在我们看到这个时候背景图片从边框开始展示的.

二.background-clip裁剪背景 规定背景的绘制区域

同样有三个值

                        border-box(默认值) 规定绘制区域由border开始

                        content-box        规定绘制区域content

                         padding-box        规定绘制区域padding开始

1.backgroun-clip:border-box;

.d2{width: 100px;height: 100px;border-radius: 50%;background-color: blueviolet;border: 20px dotted brown;margin-top: 100px;}

因为我们设置边框样式为dotted我们看到边框空隙由背景颜色填充了.此时为默认值backgroun-clip:border--box;

2.content-box

.d2{width: 100px;height: 100px;border-radius: 50%;background-color: blueviolet;border: 20px dotted brown;margin-top: 100px;background-clip: content-box;padding: 50px;}

这个时候可以看到只有内容区域有背景颜色.不包含border和padding

 

 

此时页面展示的效果就只有内容由背景颜色填充了

3.padding-box

.d2{width: 100px;height: 100px;border-radius: 50%;background-color: blueviolet;border: 20px dotted brown;margin-top: 100px;background-clip: padding-box;padding: 50px;}

 此时我们改变盒子backgro-clip为padding-box

可以看到背景颜色填充到了padding部分

 

三.background-clip和back-ground-origin区别

这两者的用法和效果相似.有什么区别呢我们设置代码两个属性都添加看看效果

.box{width: 600px;height: 500px;padding: 50px;border:20px dotted blueviolet;background: url(img/img.jpg) no-repeat;/* background-origin: content-box; */background-origin: border-box;background-clip: content-box;background-color: cadetblue;}

这个盒子我们指定了背景颜色和背景图片我们添加clip为content-box而origin为border-box

此时我们看到内容区以外的背景图片也不显示了.

而我们试试clip设置为border-box而origin设置为content-box

.box{width: 600px;height: 500px;padding: 50px;border:20px dotted blueviolet;background: url(img/img.jpg) no-repeat;/* background-origin: content-box; *//* background-origin: border-box; *//* background-clip: content-box; */background-clip: border-box;background-origin: content-box;background-color: cadetblue;}

此时页面展示的效果为

 

我们看到背景颜色依然正常显示

这个时候我们可以得知background-clip是可以把background-origin给裁减掉的.

而origin无法裁减掉backgorund-clip的

 

 

 

本文标签： css背景属性 background

版权声明：本文标题：CSS背景属性,background 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/p/1700361312a413499.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。