1-背景圖
1-1屬性名 background-image
1-2屬性值
background-image:url(圖片路徑)却邓;
1-3效果
原圖信息
通過html厨姚,放入指定位置顯示弧轧。
圖片出來了很多争占,原因是因為盒子的位置很大外臂,但是圖片本身尺寸很小湿硝。
代碼如下
2-背景平鋪
屬性名 background-repeat
屬性值
2-1蚕捉,使用 repeat 后奏篙,圖片和代碼對照如下
bacakground-repeat:repeat;沒有給圖片添加效果,原因是鱼冀,repeat是默認值报破;
2-2 使用 no-repeat 后悠就,對照如下圖
顯示圖片沒有再平鋪,no-repeat 的作用被顯示出來充易;但是梗脾,背景沒有鋪滿背景。這里顯示了背景顏色在下盹靴,背景圖在背景顏色上面炸茧。
2-3 圖片平鋪方向-x軸
使用了 repeat-x 后,圖片僅顯示了x軸的平鋪稿静,y軸沒有平鋪梭冠;
2-4 圖片平鋪方向-y軸
使用了 repeat-y后,圖片僅顯示了y軸的平鋪改备,x軸沒有平鋪控漠;
3 圖片平鋪方式對比和代碼
下一篇,寫背景位置的練習情況悬钳。
(僅為個人自學的一點點思考盐捷,如有錯漏,歡迎留言指正)