关于CSS3多重背景及背景图片裁剪和定位以及尺寸的具体详解
CSS3之前我們可以對背景添加一張圖片
CSS3允許我們在一個元素上添加多個圖片
多重背景圖片
<p class="demo"></p>
登錄后復(fù)制
.demo { width: 600px; height: 200px; border: 1px solid black; background: url('1.png') no-repeat;}
登錄后復(fù)制
多重背景可以把多個圖片資源添加到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;}
登錄后復(fù)制
如果不設(shè)置no-repeat下面的圖片資源會覆蓋上面的圖片資源
圖片起始位置background-origin
background-origin允許我們定義圖片從哪兒開始定位
可選的屬性值padding-box（默認(rèn)）、border-box、content-box;
padding-box默認(rèn)圖片從內(nèi)邊距開始
我們可以加上內(nè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;}
登錄后復(fù)制
【注：css是不能行注釋的，我這樣注釋是為了高亮效果，大家不要被誤導(dǎo)】
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/*增*/;}
登錄后復(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ū)
在整個元素邊框及邊框以內(nèi)都是可以繪制的
可以稍微修改一上面的代碼證明這一點
.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的屬性值類似
有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中的圖片裁剪屬性還有一個特殊的屬性值是text
意思就是背景圖片被限制到文字上
配合text-fill-color可以形成獨特的遮罩文字效果，了解一下
<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
回到我們的一張圖片上來
background-size這個屬性允許我們控制圖片的大小
比如寫兩個像素值控制寬高
.demo {/*新*/
width: 600px; height: 200px; border: 1px solid black; background: url('1.png') no-repeat; background-size: 180px 140px;}
登錄后復(fù)制
寫一個像素值就代表寬和高像素相同
當(dāng)然也可以寫成百分形式
除此之外還有兩個關(guān)鍵字：cover和contain
cover是覆蓋整個區(qū)域，在我們的這個例子中寬度會占滿
.demo { width: 600px; height: 200px; border: 1px solid black; background: url('1.png') no-repeat; background-size: cover/*改*/;}
登錄后復(fù)制
contain是保證圖片在區(qū)域內(nèi)最大顯示，在我們的這個例子中高度會占滿
.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)容，更多請關(guān)注風(fēng)君子博客其它相關(guān)文章！
總結(jié)
以上是生活随笔為你收集整理的关于CSS3多重背景及背景图片裁剪和定位以及尺寸的具体详解的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 虚拟机拷贝数据到服务器,虚拟机文件拷到u
- 下一篇： hashset java 键值对_Jav