首页 >web前端 >css教程 >关于CSS3多重背景及背景图片裁剪和定位以及尺寸的具体详解

关于CSS3多重背景及背景图片裁剪和定位以及尺寸的具体详解

黄舟
黄舟原创
2017-05-21 16:34:012848浏览

CSS3之前我们可以对背景添加一张图片 

CSS3允许我们在一个元素上添加多个图片

多重背景图片

<p class="demo"></p>
.demo {    width: 600px;    height: 200px;    border: 1px solid black;    background: url(&#39;1.png&#39;) no-repeat;}


多重背景可以把多个图片资源添加到background属性上,用逗号隔开
然后用background-position把他们定位到你想要的位置

.demo {    width: 600px;    height: 200px;    border: 1px solid black;    background: url(&#39;1.png&#39;) no-repeat,                url(&#39;2.png&#39;) no-repeat 200px 0,                url(&#39;3.png&#39;) 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(&#39;1.png&#39;) no-repeat,                url(&#39;2.png&#39;) no-repeat 200px 0,                url(&#39;3.png&#39;) no-repeat 400px 0;}

【注:css是不能行注释的,我这样注释是为了高亮效果,大家不要被误导】


border-box定义图片从边框开始

.demo {    width: 600px;    height: 200px;    border: 20px solid gray;    padding: 20px;    background: url(&#39;1.png&#39;) no-repeat,                url(&#39;2.png&#39;) no-repeat 200px 0,                url(&#39;3.png&#39;) no-repeat 400px 0;    background-origin: border-box/*增*/;}


修改为border-box我们发现图片的一部分被挡在了灰色背景色的底部
可以理解为边框实际要在元素的更上面


.demo {    width: 600px;    height: 200px;    border: 20px solid gray;    padding: 20px;    background: url(&#39;1.png&#39;) no-repeat,                url(&#39;2.png&#39;) no-repeat 200px 0,                url(&#39;3.png&#39;) 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(&#39;1.png&#39;) no-repeat,                url(&#39;2.png&#39;) no-repeat 200px 0,                url(&#39;3.png&#39;)/*删掉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(&#39;1.png&#39;) no-repeat,                url(&#39;2.png&#39;) no-repeat 200px 0,                url(&#39;3.png&#39;) 400px 0;    background-origin: content-box;    background-clip: content-box/*增*/;}

这样图片多余的部分就看不到了


在我们webkit中的图片裁剪属性还有一个特殊的属性值是text
意思就是背景图片被限制到文字上
配合text-fill-color可以形成独特的遮罩文字效果,了解一下

<p class="demo">某科学的超电磁炮</p>  <--添加内容
.demo {    width: 600px;    height: 200px;    border: 20px solid transparent;    padding: 20px;    background: url(&#39;1.png&#39;) no-repeat,                url(&#39;2.png&#39;) no-repeat 200px 0,                url(&#39;3.png&#39;) 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(&#39;1.png&#39;) no-repeat;    background-size: 180px 140px;}


写一个像素值就代表宽和高像素相同
当然也可以写成百分形式


除此之外还有两个关键字:cover和contain
cover是覆盖整个区域,在我们的这个例子中宽度会占满

.demo {    width: 600px;    height: 200px;    border: 1px solid black;    background: url(&#39;1.png&#39;) no-repeat;    background-size: cover/*改*/;}


contain是保证图片在区域内最大显示,在我们的这个例子中高度会占满

.demo {    width: 600px;    height: 200px;    border: 1px solid black;    background: url(&#39;1.png&#39;) no-repeat;    background-size: contain;}

CSS3背景图片的内容大概就是这些了

以上是关于CSS3多重背景及背景图片裁剪和定位以及尺寸的具体详解的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn