CSS背景background圖片

時間 2020-05-09

原文原文鏈接

1、CSS背景background圖片 - TOP

一、背景圖片語法
background-image:url() 引入背景圖片
background-repeat:no-repeat 設置背景圖片是否重複平鋪
background-position:left top 設置圖片的css背景定位，left表明靠左，top表明靠上css

簡寫背景圖片語法：
background:url(圖片地址) no-repeat left tophtml

二、背景圖片設置
Body{background:url(http://www.divcss5.com/img201301/divcss5-logo-2013.gif) no-repeat 0 0 }
這裏設置了圖片「http://www.divcss5.com/img201301/divcss5-logo-2013.gif」做爲網頁背景不重複並靠上靠左顯示。，字體

三、CSS背景圖居中ui

橫向居中：
background:url(圖片地址) no-repeat center topurl

縱向居中：
background:url(圖片地址) no-repeat left 50%
這裏50%是隨意設置考上爲50%距離，細節具體上下垂直居中須要再經過百分比均衡設置。spa

四、背景圖片通常案例
Body設置網頁背景css代碼
body{background:url(http://www.divcss5.com/img201301/divcss5-logo-2013.gif) no-repeat 0 0}3d

CSS圖片背景案例截圖htm

不重複也不平鋪圖片背景截圖對象

五、div css背景圖片居中
Css背景圖片居中代碼：
body{background:url(http://www.divcss5.com/img201301/divcss5-logo-2013.gif) no-repeat center 0}
這裏咱們用了「center 」居中屬性，更多詳情可進入css 背景瞭解基礎blog

居中截圖

背景圖片居中於網頁截圖

六、背景圖片橫向平鋪

CSS背景X橫向平鋪代碼：
body{background:url(http://www.divcss5.com/img201301/divcss5-logo-2013.gif) repeat-x}

案例截圖：

Y軸橫向平鋪圖片背景截圖

七、背景圖片縱向平鋪

CSS背景Y縱向平鋪代碼：
body{
background:url(http://www.divcss5.com/img201301/divcss5-logo-2013.gif) repeat-y
}

平鋪重複圖片背景效果截圖：

縱向Y軸方向垂直平鋪圖片背景截圖

八、全網頁背景圖片重複平鋪

圖片背景全屏網頁重複平鋪關鍵代碼：
body{background:url(http://www.divcss5.com/img201301/divcss5-logo-2013.gif)}