background:背景顏色，圖像，平鋪方式，大小，位置

能夠顯示背景區(qū)域即為盒子模型的填充和內(nèi)容部分，其中背景圖像將會(huì)覆蓋背景顏色。常見的水平或垂直漸變顏色背景通常使用水平或垂直漸變的背景圖像在水平或垂直方向平鋪，在相鄰元素在設(shè)置背景進(jìn)行過度

?

大分小：在css中的圖像，如果一張圖像太大會(huì)造成網(wǎng)絡(luò)請求下載時(shí)間增加，這時(shí)候需要考慮將圖像進(jìn)行拆分，即大分小

小拼大：有一些小圖標(biāo)形式的圖像被零碎的使用到頁面中，這些小圖像很小，單個(gè)網(wǎng)絡(luò)請求很快，但是數(shù)量達(dá)到一定的時(shí)候會(huì)增加網(wǎng)絡(luò)請求次數(shù)，不利于頁面響應(yīng)速度，因此使用拼圖技術(shù)

將多張小圖像 按照一定的規(guī)律和間距進(jìn)行整合為一張圖像，這時(shí)候小圖標(biāo)應(yīng)用改圖像為背景，各自設(shè)置各自背景大小和位置即可，這樣既減小了網(wǎng)絡(luò)請求，又使得后期圖像得到統(tǒng)一的維護(hù)。

?

1 背景色與圓角邊框

在css2.0時(shí)代由于css本身的邊框并不支持圓角樣式，所以使用背景顏色來模擬實(shí)現(xiàn)。由于單個(gè)元素的背景圖像只有一個(gè)，因此需要上下兩個(gè)元素進(jìn)行配合，其實(shí)現(xiàn)方式主要有

1.1 固定大小

將背景圖像進(jìn)行水平或垂直拆分，然后在容器下邊左下角進(jìn)行背景填充，而左上角使用上邊元素背景圖像填充，這種方式只適合固定大小，且邊框顏色修改得準(zhǔn)備多套圖像，因此有很多缺點(diǎn)

1.2 水平或垂直拉升

由于固定大小的局限性，因此將圖像進(jìn)行水平或垂直三分拆分，比如在垂直方向則在中間部分進(jìn)行垂直平鋪并重復(fù)，這樣可以解決在水平或垂直方向拉升，但不能既水平和垂直方向拉升

1.3 水平和垂直拉升

在1.2 的基礎(chǔ)上在背景圖像右上角進(jìn)行水平和垂直拆分為四份，并按照這樣的方式設(shè)置背景，可以做到水平和垂直方向同時(shí)拉升，但是任然具有修改顏色的局限性

1.4 山頂腳圖片

山頂腳圖片其實(shí)就是一個(gè)三角形圖像，將他使用蒙版的形式填充背景，這時(shí)候圖像本身一部分是透明的，因此背景色也就起到了顯示作用

1.5 css3

css3.0的出現(xiàn)讓css本身支持圓角邊框，且元素可以具有多個(gè)背景圖像，如{-webkit-border-radius:1em;-moz-border-radius:1em;border-radius:1em};

由于在css3的支持上還存在一些瀏覽器內(nèi)核差異性，因此還是需要使用兼容性的 -webkit -moz分別代表了谷歌和火狐的內(nèi)核

2 邊框圖像

css3支持邊框圖像，其具體使用方式為九宮格方式

?

3 特殊字體

由于瀏覽器能夠支持的字體有限，而特殊字體的使用也并非廣泛使用，因此制作一張背景圖片來顯示特殊字體的文本，而真實(shí)的文本則隱藏，形如?

<div>

　　<span>防護(hù)問哦廢話</span>

</div>

div span{display:none;} span{background-image:url("dsdsa.png"),none left top;}

?

4 投影

4.1 背景圖方式實(shí)現(xiàn)投影

不外乎就是準(zhǔn)備一張投影圖像，使用相對定位或者負(fù)邊距方式讓圖像在原有位置上偏移，這樣的話也比較麻煩，需要制作相應(yīng)的投影圖像，也增加了圖像資源請求，很不好

4.2 css3.0支持投影

box-show：垂直 水平偏移 投影的模糊程度，投影顏色 與邊框使用方式類似也需要瀏覽器內(nèi)核多支持

5 透明度

在ie時(shí)代使用濾鏡方式:filter() 或者使用rgba方式增加顏色透明通道，css3 中直接使用alpha即可

?

轉(zhuǎn)載于:https://www.cnblogs.com/rjjs/p/6504505.html

總結(jié)

以上是生活随笔為你收集整理的css那些事儿4 背景图像的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。