背景圖：（相關驗證代碼請查看代碼，在驗證時需將當前不需要驗證的代碼註釋掉） 1.inherit:從父元素繼承屬性設置 2.background-repeat:平鋪(在圖片大小小於元素尺寸時背景圖預設平鋪): no-repeat:取消預設平鋪 repeat-x:橫向平鋪 repeat-y:縱向平鋪 3 ...
背景圖：（相關驗證代碼請查看代碼，在驗證時需將當前不需要驗證的代碼註釋掉）
1.inherit:從父元素繼承屬性設置
2.background-repeat:平鋪(在圖片大小小於元素尺寸時背景圖預設平鋪):
no-repeat:取消預設平鋪
repeat-x:橫向平鋪
repeat-y:縱向平鋪
3.background-size:尺寸
px、百分比:依舊預設平鋪元素
cover:等比放大覆蓋元素
contain:等比放大,直到圖片的一邊達到元素的邊框
4.background-attachment:固定
scroll:圖片隨滾動條滾動而上下移動
fixed:圖片固定在元素中不會隨滾動條移動
----由於需要動態設置可以查看代碼自己試驗
5.background-position:定位
方式1：
(+:取值為正 單位:px)
x:水平偏移 + 右邊 -左邊
y:垂直偏移 + 下 -上
----background-position:25px 50px;
方式2：
(以元素邊框的左右為基準)
x left right center
y top bottom center
----background-position:left top;
----background-position:center；
(需要註意一點的是，除了設置背景圖的固定以外，在設置背景圖片的尺寸與定位時，若不取消圖片的預設平鋪，此時依然會對元素進行背景平鋪)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>背景圖</title> <!-- 背景圖： 1.inherit:從父元素繼承屬性設置 2.background-repeat:平鋪(在圖片大小小於元素尺寸時背景圖預設平鋪): no-repeat:取消預設平鋪 repeat-x:橫向平鋪 repeat-y:縱向平鋪 3.background-size:尺寸 px、百分比:依舊預設平鋪元素 cover:等比放大覆蓋元素 contain:等比放大,知道圖片的一邊達到元素的邊框 4.background-attachment:固定 scroll:圖片隨滾動條滾動而上下移動 fixed:圖片固定在元素中不會隨滾動條移動 5.background-position:定位 方式1： (+:取值為正 單位:px) x:水平偏移 + 右邊 -左邊 y:垂直偏移 + 下 -上 方式2： (以元素邊框的左右為基準) x left right center y top bottom center --> <style> .boxrepeat,.boxsize,.boxattachment,.boxposition{ width: 300px; height: 400px; border: 1px solid #000000; /* 圖片可更改 */ background-image: url(img/shoucang.png); /*從父元素繼承屬性的設置*/ background-repeat-x:inherit; } .boxrepeat{ /*取消預設平鋪*/ background-repeat: no-repeat; /* 橫向平鋪 */ background-repeat: repeat-x; /* 縱向平鋪 */ background-repeat: repeat-y; } .boxsize{ /*背景圖片的尺寸:px、百分比--依舊會預設平鋪元素*/ background-size: 30px; background-size: 50%; /*圖片的覆蓋cover--等比放大覆蓋整個元素*/ background-size: cover; /*背景圖片的包含contain--在取消預設平鋪的情況下，將圖片等比放大直到圖片的一邊到達元素的邊框*/ background-repeat: no-repeat; background-size: contain; } .boxattachment{ /*圖片的固定--scroll:隨著頁面其餘部分的的滾動而移動*/ background-attachment: scroll; /*圖片的固定--fixed背景不會隨著滾輪移動 但是元素會移動並且對圖片進行一部分的覆蓋*/ background-attachment: fixed; } .boxposition{ /*背景圖片的定位--x:left y:top 位於左邊頂部*/ background-repeat: no-repeat; /* background-position: left top; */ /*背景圖片的定位--x:25px y:50px 向右偏移25px 向下偏移50px*/ background-position:25px 50px; background-position: right bottom ; /*背景圖片的定位--center 居中*/ background-position: center; } </style> </head> <body> <div class="boxrepeat"></div> <div class="boxsize"></div> <div class="boxattachment"></div> <div class="boxposition"></div> </body> </html>
