关于CSS3多重背景及背景图片裁剪和定位以及尺寸的具体详解
CSS3之前我們可以對(duì)背景添加一張圖片
CSS3允許我們?cè)谝粋€(gè)元素上添加多個(gè)圖片
多重背景圖片
<p class="demo"></p>
登錄后復(fù)制
.demo { width: 600px; height: 200px; border: 1px solid black; background: url('1.png') no-repeat;}
登錄后復(fù)制
多重背景可以把多個(gè)圖片資源添加到background屬性上，用逗號(hào)隔開(kāi)
然后用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;}
登錄后復(fù)制
如果不設(shè)置no-repeat下面的圖片資源會(huì)覆蓋上面的圖片資源
圖片起始位置background-origin
background-origin允許我們定義圖片從哪兒開(kāi)始定位
可選的屬性值padding-box（默認(rèn)）、border-box、content-box;
padding-box默認(rèn)圖片從內(nèi)邊距開(kāi)始
我們可以加上內(nèi)邊距證明這一點(diǎn)
.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;}
登錄后復(fù)制
【注：css是不能行注釋的，我這樣注釋是為了高亮效果，大家不要被誤導(dǎo)】
border-box定義圖片從邊框開(kāi)始
.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/*增*/;}
登錄后復(fù)制
修改為border-box我們發(fā)現(xiàn)圖片的一部分被擋在了灰色背景色的底部
可以理解為邊框?qū)嶋H要在元素的更上面
.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/*改*/;}
登錄后復(fù)制
content-box定義從元素的內(nèi)容部分為起始位置
圖片裁剪background-clip
雖然我們的起始位置設(shè)置為內(nèi)容區(qū)
但這不代表我們的圖片就被限制在內(nèi)容區(qū)
在整個(gè)元素邊框及邊框以?xún)?nèi)都是可以繪制的
可以稍微修改一上面的代碼證明這一點(diǎn)
.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 默認(rèn)repeat*/ 400px 0; background-origin: content-box;}
登錄后復(fù)制
那么有辦法設(shè)置圖片顯示的范圍嗎?
這就用到了我們的background-clip屬性
與content-origin的屬性值類(lèi)似
有padding-box（默認(rèn)）、border-box、content-box;
設(shè)置圖片顯示范圍，像被裁剪了一樣
.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/*增*/;}
登錄后復(fù)制
這樣圖片多余的部分就看不到了
在我們webkit中的圖片裁剪屬性還有一個(gè)特殊的屬性值是text
意思就是背景圖片被限制到文字上
配合text-fill-color可以形成獨(dú)特的遮罩文字效果，了解一下
<p class="demo">某科學(xué)的超電磁炮</p> <--添加內(nèi)容
登錄后復(fù)制
.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;/*增*/}
登錄后復(fù)制
圖片尺寸background-size
回到我們的一張圖片上來(lái)
background-size這個(gè)屬性允許我們控制圖片的大小
比如寫(xiě)兩個(gè)像素值控制寬高
.demo {/*新*/
width: 600px; height: 200px; border: 1px solid black; background: url('1.png') no-repeat; background-size: 180px 140px;}
登錄后復(fù)制
寫(xiě)一個(gè)像素值就代表寬和高像素相同
當(dāng)然也可以寫(xiě)成百分形式
除此之外還有兩個(gè)關(guān)鍵字：cover和contain
cover是覆蓋整個(gè)區(qū)域，在我們的這個(gè)例子中寬度會(huì)占滿(mǎn)
.demo { width: 600px; height: 200px; border: 1px solid black; background: url('1.png') no-repeat; background-size: cover/*改*/;}
登錄后復(fù)制
contain是保證圖片在區(qū)域內(nèi)最大顯示，在我們的這個(gè)例子中高度會(huì)占滿(mǎn)
.demo { width: 600px; height: 200px; border: 1px solid black; background: url('1.png') no-repeat; background-size: contain;}
登錄后復(fù)制
CSS3背景圖片的內(nèi)容大概就是這些了
以上就是關(guān)于CSS3多重背景及背景圖片裁剪和定位以及尺寸的具體詳解的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注風(fēng)君子博客其它相關(guān)文章！
總結(jié)
以上是生活随笔為你收集整理的关于CSS3多重背景及背景图片裁剪和定位以及尺寸的具体详解的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 虚拟机拷贝数据到服务器,虚拟机文件拷到u
- 下一篇： 苹果七件套是什么(苹果官网报价)