background size屬性的使用方法

2021-10-23 14:45:31 字數 520 閱讀 6069

background-size有幾個預定義的值,但也可以像其它size屬性一樣使用數字:

contain: 包含,整個背景圖都要被包含在元素內,沒有超出的部分。

cover: 覆蓋,背景要覆蓋元素的所有區域,不能有空白出現。

長度/百分比: 數字值

使用"length"|"percentage"時,第乙個值是指背景影象的width,第二個指背景影象的height,如果只有乙個值,height就為auto

使用percentage注意:width和height是針對於背景區域,不是背景影象大小。

cover:背景影象縮放,保留影象原有的比例/長寬比,不管背景影象大於還是小於背景區域,都會覆蓋背景區域,影象的寬度或高度等於或超過背景區域,再次,根據背景影象的比例是否匹配的背景區域,背景影象的某些部分可能不在背景區域內。

contain:背景影象縮放,同時保留影象原有的比例/長寬比,無論是影象的寬度或高度超過背景區域,以盡可能大的覆蓋背景區域。因此,根據背景影象的比例是否匹配背景區域,可能會有一些背景影象覆蓋不到背景地區

background size屬性詳解

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

background size屬性詳解

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

background size使用詳解

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