深入理解CSS背景

背景色background接受所有合法的顏色，還可以接受乙個使背景透明的關鍵字。關於顏色的設定請移步至此。背景顏色不能繼承。其預設值是transparent，如果乙個元素沒有指定的顏色，那麼背景就應當是透明的，這樣其祖先元素的背景才能可見。

值: | transparent | inherit

初始值: transparent

應用於: 所有元素

繼承性: 無

值: | none | inherit

初始值: none

應用於: 所有元素

繼承性: 無

背景影象預設從乙個元素的左上角padding-box開始平鋪(background-repeat)，但其從各個方向朝外面平鋪，包括border區域。背景平鋪的屬性值中space和round是css3新增的值。space表示背景影象的兩端對齊平鋪，多出來的空間用空白代替；round也表示背景影象的兩端對齊平鋪，但多出來的空間通過自身拉伸來填充

[注意]space和round這兩個新增屬性值firefox、safari和ie9-瀏覽器不支援

初始值: repeat

應用於: 所有元素

繼承性: 無

背景定位background-position

值: [[| left | center | right] | | top | center | bottom ] ? ] || [[left | center | right] || [top | center | bottom]] | inherit

初始值: 0% 0%

應用於: 全部元素

繼承性: 無

百分數: 相對於元素和原影象的相應點

【寫法】

關鍵字x(水平方向):

left: 圖的左側和元素左側對齊

center:圖的中間和元素中間對齊

right:圖的右側和元素右側對齊

y(垂直方向):

top: 圖的頂部和元素頂部對齊

center:圖的中間和元素中間對齊

bottom:圖的底部和元素底部對齊

[注意]單一關鍵字：當某一方向的關鍵字為center時可省略

具體值x(水平方向)：

正值從左向右移動，負值從右向左移動

y(垂直方向)：

正值從上向下移動，負值從下向上移動

[注意]頁面左上角為原點(0,0)點

[注意]背景影象移出到元素範圍外的部分不顯示

百分比x%(水平方向)：

背景影象的x%對應元素的x%

y%(垂直方向)：

背景影象的y%對應元素的y%

[注意]若只寫了乙個值，另乙個值將是50%

【新用法】

在css2.1中，背景定位只支援以左上角為參照進行定位，在css3中新增了可以選擇參照方向的定位。第乙個和第三個引數為要參照的方向，第二個和第四個引數為偏移值

background-attachment背景關聯

值: scroll | fixed | inherit

初始值: scroll

應用於: 所有元素

繼承性: 無

fixed：原影象不會隨文件滾動，且原影象的放置由可視區的大小確定，而不是由包含該影象的元素的大小或在可視區中的位置決定。在瀏覽器中，隨著使用者調整瀏覽器視窗的大小，可視區可能會改變。這會導致背景的原影象隨著視窗大小的改變移動位置。所以某種意義上說，影象並不是固定的，它只是在可視區大小不改變的情況下保持固定

[注意]ie6-瀏覽器無法處理非body元素上的固定關係

[注意]local屬性值ie8-瀏覽器不支援

background-origin: padding-box || border-box || content-box

padding-box: 預設值，決定背景定位起始位置從padding的外邊緣開始顯示背景

border-box: 決定背景定位起始位置從border的外邊緣開始顯示背景

content-box: 決定背景定位起始位置從content的外邊緣開始顯示背景

背景裁切(background-clip)屬性用來定義背景影象的裁剪區域。同背景原點的屬性有幾分相似

[注意]ie8-瀏覽器不支援

background-clip: padding-box || border-box || content-box

在webkit核心下支援text屬性

-webkit-background-clip: text;

配合-webkit-text-fill-color: transparent;的屬性可以使文字顏色呈現背景影象的效果

使用背景尺寸(background-size)屬性可以指定背景的尺寸，可以控制背景在水平和垂直兩個方向的縮放，也可以控制拉伸覆蓋背景區域的方式，甚至還可以擷取背景。背景能夠自適應元素盒子的大小，實現與模組大小完全適應的背景，避免了因區塊尺寸不同而需要設計不同的背景

[注意]ie8-瀏覽器不支援

當背景尺寸屬性為固定數值或百分比值時可以設定兩個值，也可以設定乙個值。只取乙個值時，指定了背景的寬度，第二個值相當於auto，也就是指定了高度。在這種情況下，auto值設定之後能夠讓背景的高度自動地按照比例縮放

background-size: auto || || || cover || contain

auto: 預設值，將保持背景的原始高度和寬度

: 取具體的整數值

: 取百分比，相對於元素的寬度和padding的總和來計算

cover: 將背景放大，以適合鋪滿整個容器。但這種方法會致使背景失真。常與background-position: center配合來製作滿屏背景效果。缺點是需要製作一張足夠大的背景，否則在較大解析度瀏覽器下會使背景失真

contain: 保持背景影象本身的寬度比例，將背景影象縮放到寬度或高度正好適應所定義背景容器的區域

在使用css3之前，每個容器只能指定一張背景影象，因此每當需要增加一張背景影象時，必須至少新增乙個容器來容納它。使用偽元素顯示附加其實就是巢狀html標籤實現多背景影象的變身，通過:after和:before等偽元素生成附加元素來放置背景影象，表面上比直接巢狀html標籤更乾淨一些，但其實是換湯不換藥

[注意]ie8-瀏覽器不支援

通過css3的多背景屬性，html標記就不需要任何修改，在css的background-image或者background屬性中列出需要使用的所有背景影象，用逗號分隔開。而且每張都具有background中的屬性

css3多背景有層次之分，按照瀏覽器中顯示時影象疊放的順序從上到下指定，最先宣告的背景影象將會居於最上層，最後指定的背景影象將置於最底層

除了背景顏色之外，其他的屬性都可以設定多個屬性值，前提是元素有多個背景影象存在

對於不相容多背景的瀏覽器來說，多背景屬性寫在單一背景屬性的後面，而且還要確保這張單一背景影象確實可用。這是處理相容css3多背景特性相容的常用方案

[注意]若background在background-origin和background-clip中僅存在乙個值，則該值為background-clip；若存在兩個值，則前面為background-origin，後面為background-clip

[注意]所有背景屬性都不能繼承

深入理解CSS背景

深入理解CSS背景

深入理解CSS浮動

css深入理解padding

深入理解CSS背景

深入理解CSS背景

深入理解CSS浮動

css深入理解padding

相關推薦