CSS3之前我们可以对背景添加一张图片
css3允许我们在一个元素上添加多个图片
多重背景图片
.demo { width: 600px; height: 200px; border: 1px solid black; background: url('1.png') no-repeat;}
多重背景可以把多个图片资源添加到background属性上，用逗号隔开
然后用background-position把他们定位到你想要的位置
.demo { width: 600px; height: 200px; border: 1px solid black; background: url('1.png') no-repeat, url('2.png') no-repeat 200px 0, url('3.png') no-repeat 400px 0;}
如果不设置no-repeat下面的图片资源会覆盖上面的图片资源
图片起始位置background-origin
background-origin允许我们定义图片从哪儿开始定位
可选的属性值padding-box（默认）、border-box、content-box;
padding-box默认图片从内边距开始
我们可以加上内边距证明这一点
立即学习“前端免费学习笔记（深入）”；
.demo { width: 600px; height: 200px; border: 20px solid gray/*改*/; padding: 20px/*增*/; background: url('1.png') no-repeat, url('2.png') no-repeat 200px 0, url('3.png') no-repeat 400px 0;}
【注：css是不能行注释的，我这样注释是为了高亮效果，大家不要被误导】 
border-box定义图片从边框开始
.demo { width: 600px; height: 200px; border: 20px solid gray; padding: 20px; background: url('1.png') no-repeat, url('2.png') no-repeat 200px 0, url('3.png') no-repeat 400px 0; background-origin: border-box/*增*/;}
修改为border-box我们发现图片的一部分被挡在了灰色背景色的底部
可以理解为边框实际要在元素的更上面
.demo { width: 600px; height: 200px; border: 20px solid gray; padding: 20px; background: url('1.png') no-repeat, url('2.png') no-repeat 200px 0, url('3.png') no-repeat 400px 0; background-origin: content-box/*改*/;}
content-box定义从元素的内容部分为起始位置 
图片裁剪background-clip
虽然我们的起始位置设置为内容区
但这不代表我们的图片就被限制在内容区
在整个元素边框及边框以内都是可以绘制的
可以稍微修改一上面的代码证明这一点
.demo { width: 600px; height: 200px; border: 20px solid transparent/*改*/; padding: 20px; background: url('1.png') no-repeat, url('2.png') no-repeat 200px 0, url('3.png')/*删掉no-repeat 默认repeat*/ 400px 0; background-origin: content-box;}
那么有办法设置图片显示的范围吗?
这就用到了我们的background-clip属性
与content-origin的属性值类似
有padding-box（默认）、border-box、content-box;
设置图片显示范围，像被裁剪了一样
.demo { width: 600px; height: 200px; border: 20px solid transparent; padding: 20px; background: url('1.png') no-repeat, url('2.png') no-repeat 200px 0, url('3.png') 400px 0; background-origin: content-box; background-clip: content-box/*增*/;}
这样图片多余的部分就看不到了
在我们webkit中的图片裁剪属性还有一个特殊的属性值是text
意思就是背景图片被限制到文字上
配合text-fill-color可以形成独特的遮罩文字效果，了解一下
某科学的超电磁炮
<--添加内容
.demo { width: 600px; height: 200px; border: 20px solid transparent; padding: 20px; background: url('1.png') no-repeat, url('2.png') no-repeat 200px 0, url('3.png') 400px 0; background-origin: content-box; -webkit-background-clip: text;/*增*/ -webkit-text-fill-color: transparent;/*增*/ font: 75px/200px bold;/*增*/}
图片尺寸background-size
回到我们的一张图片上来
background-size这个属性允许我们控制图片的大小
比如写两个像素值控制宽高
.demo {/*新*/ width: 600px; height: 200px; border: 1px solid black; background: url('1.png') no-repeat; background-size: 180px 140px;}
写一个像素值就代表宽和高像素相同
当然也可以写成百分形式
除此之外还有两个关键字：cover和contain
cover是覆盖整个区域，在我们的这个例子中宽度会占满
.demo { width: 600px; height: 200px; border: 1px solid black; background: url('1.png') no-repeat; background-size: cover/*改*/;}
contain是保证图片在区域内最大显示，在我们的这个例子中高度会占满
.demo { width: 600px; height: 200px; border: 1px solid black; background: url('1.png') no-repeat; background-size: contain;}
CSS3背景图片的内容大概就是这些了
以上就是关于CSS3多重背景及背景图片裁剪和定位以及尺寸的具体详解的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1608608.html
微信扫一扫 
支付宝扫一扫 
