css背景屬性

【目錄】

①background-attachment背景附件------設定背景影象是否固定或者隨著頁面的其餘部分滾動；

②background-clip背景修剪------規定背景的繪製區域；

③background-origin背景**------規定 background-position 屬性相對於什麼位置來定位；

④background-size背景尺寸------規定背景影象的尺寸；

【詳解】

①background-attachment背景附件------設定背景影象是否固定或者隨著頁面的其餘部分滾動

常見用法：設定固定的背景影象，使影象不會隨著頁面的其他部分滾動

屬性值：scroll—預設值，背景影象會隨著頁面其餘部分的滾動而移動；fixed—當頁面的其餘部分滾動時，背景影象不會移動

css** 收藏**

影象不會隨頁面的其餘部分滾動。

②background-clip背景修剪------規定背景的繪製區域屬性值：border-box邊界框；padding-box填充盒；content-box內容盒 border-box 背景被裁剪到邊框盒。測試 padding-box 背景被裁剪到內邊距框。測試 content-box 背景被裁剪到內容框。測試 ③background-origin背景**------規定 background-position 屬性相對於什麼位置來定位

屬性值：與背景修剪屬性值相同，border-box邊界框；padding-box填充盒；content-box內容盒

下面來看個案例：

html** 收藏**

background-origin:border-box:相對於邊框定位

這是文字。這是文字。這是文字。這是文字。這是文字。這是文字。這是文字。這是文字。這是文字。這是文字。這是文字。這是文字。這是文字。這是文字。這是文字。這是文字。這是文字。這是文字。這是文字。這是文字。這是文字。這是文字。這是文字。這是文字。這是文字。這是文字。這是文字。這是文字。這是文字。這是文字。這是文字。這是文字。這是文字。這是文字。這是文字。這是文字。

background-origin:content-box:相對於內容定位

④background-size背景尺寸------規定背景影象的尺寸；

【相容】ie9及其他主流瀏覽器均支援

屬性值：length（具體數值設定寬高）；percentage（百分比）；cover（覆蓋）；contain（包含）;

length（具體寬度）：設定背景影象的高度和寬度；第乙個值設定寬度，第二個值設定高度。如果只設定乙個值，則第二個值會被設定為 auto

percentage（百分比）：以父元素的百分比來設定背景影象的寬度和高度；第乙個值設定寬度，第二個值設定高度。如果只設定乙個值，則第二個值會被設定為 auto

cover（覆蓋）：把背景影象擴充套件至足夠大，以使背景影象完全覆蓋背景區域；背景影象的某些部分也許無法顯示在背景定位區域中

contain（包含）：把影象影象擴充套件至最大尺寸，以使其寬度和高度完全適應內容區域

css背景屬性

CSS背景屬性

CSS背景屬性

CSS背景屬性

css背景屬性

CSS背景屬性

CSS背景屬性

CSS背景屬性

相關推薦