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

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

?

大分小：在css中的圖像，如果一張圖像太大會造成網絡請求下載時間增加，這時候需要考慮將圖像進行拆分，即大分小

小拼大：有一些小圖標形式的圖像被零碎的使用到頁面中，這些小圖像很小，單個網絡請求很快，但是數量達到一定的時候會增加網絡請求次數，不利于頁面響應速度，因此使用拼圖技術

將多張小圖像 按照一定的規律和間距進行整合為一張圖像，這時候小圖標應用改圖像為背景，各自設置各自背景大小和位置即可，這樣既減小了網絡請求，又使得后期圖像得到統一的維護。

?

1 背景色與圓角邊框

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

1.1 固定大小

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

1.2 水平或垂直拉升

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

1.3 水平和垂直拉升

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

1.4 山頂腳圖片

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

1.5 css3

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

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

2 邊框圖像

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

?

3 特殊字體

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

<div>

　　<span>防護問哦廢話</span>

</div>

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

?

4 投影

4.1 背景圖方式實現投影

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

4.2 css3.0支持投影

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

5 透明度

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

?

轉載于:https://www.cnblogs.com/rjjs/p/6504505.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。