background size屬性詳解

cssbackground-size屬性詳解，background-size指定背景影象大小，以象素或百分比顯示，當指定為百分比時，大小會由所在區域的寬度、高度以及background-origin（的起始位置） 的位置決定，還可以通過cover和contain來對進行伸縮。

background-size用來調整背景影象的尺寸大小。

以下為引用內容：

background-size

: contain | cover | 100px 100px | 50% 100%;

background-size：contain; // 縮小來適應元素的尺寸（保持畫素的長寬比）；

background-size屬性的值可以是預定義關鍵字cover | contain，也可以是使用長度值、百分比或auto定義背景影象的尺寸，長度和百分比不允許負值。

使用預定義值時，cover表示背景影象完全覆蓋容器的背景區域，如果影象過大或過小，則會將背景影象等比縮放到完全覆蓋容器，背景影象有可能超出容器；contain表示背景影象始終只填充容器的背景區域，如果影象過大或過小，也會對背景影象等比縮放。但是，當寬度與容器的寬度相等，或高度與容器的高度相等時，則停止縮放。所以，停止放大後，某個方向可能沒有完全覆蓋，則會顯示背景顏色。

使用長度、百分比或auto定義尺寸時，需要提供兩個引數。如果提供兩個，第乙個為背景影象的寬度，第二個為背景影象的高度；如果只提供乙個，該值為背景影象的寬度，第 2 個值預設為auto，即高度為auto，背景影象按提供的寬度等比縮放。

這裡對每個取值定義了乙個類，然後分別應用到乙個容器，來看看background-size屬性在不同取值下的表現。**如下：

div

.cover
.contain
.size

class
="cover"
>
div>
class
="contain"
>
div>
class
="size"
>
div>
上述**的執行結果如圖 4‑33 所示：
background-size屬性效果
從上圖可以看出，屬性取值cover時，背景影象要進行等比放大，以填滿整個容器，為了適應容器的寬度，高度已經溢位到了邊框的下面；取值contain時，背景影象進行等比放大，寬度到達容器的高度後，影象不再進行放大，故容器寬度有空白；使用尺寸時，影象為原始尺寸的50%。

background size屬性詳解

css background size 屬性詳解，background size 指定背景影象大小，以象素或百分比顯示，當指定為百分比時，大小會由所在區域的寬度 高度以及 background origin 的起始位置 的位置決定，還可以通過 cover 和 contain 來對進行伸縮。backg...

background size使用詳解

設定背景的程式設計客棧大小，以長度值或百分比顯示，還可以通過cover和contain來對進行伸縮。語法 background size auto 長度值 百分比 cover contain程式設計客棧 取值說明 1 auto 預設值，不改變背景的原始高度和寬度 2 長度值 成對出現如200px 5...

background size屬性的使用方法

background size有幾個預定義的值，但也可以像其它size屬性一樣使用數字 contain 包含，整個背景圖都要被包含在元素內，沒有超出的部分。cover 覆蓋，背景要覆蓋元素的所有區域，不能有空白出現。長度 百分比 數字值 使用 length percentage 時，第乙個值是指背景...