背景圖片與CSS背景顏色樣式技術經驗篇我們使用樣式屬性,可以設置網頁背景單一顏色、網頁背景為圖片、網頁背景圖片居中于網頁、網頁背景圖片網頁固定位置、網頁背景圖片中網頁中重復平鋪等css背景樣式介紹與案例講解。擴展閱讀:CSS背景基礎:en/、CSS背景圖片1、背景圖片語法-image:url()引入背景圖片-:no-設置背景圖片是否重復平鋪-:設置圖片的css背景定位,left代表靠左,top代表靠上簡寫背景圖片語法::url(圖片地址)no-、背景圖片設置Body{:url(/-logo-)no-}這里設置了圖片“/-logo-”作為網頁背景不重復并靠上靠左顯示。,3、CSS背景圖居中橫向居中::url(圖片地址)no-縱向居中::url(圖片地址)no-%這里50%是隨意設置考上為50%距離css背景圖片固定位置,細節具體上下垂直居中需要再通過百分比均衡設置。
4、背景圖片一般案例Body設置網頁背景css代碼body{:url(/-logo-)no-}CSS圖片背景案例截圖不重復也不平鋪圖片背景截圖5、背景圖片居中Css背景圖片居中代碼:body{:url(/-logo-)no-}這里我們用了“”居中屬性css背景圖片固定位置,更多詳情可進入css背景了解基礎居中截圖背景圖片居中于網頁截圖6、背景圖片橫向平鋪CSS背景X橫向平鋪代碼:body{:url(/-logo-)-x}案例截圖:Y軸橫向平鋪圖片背景截圖7、背景圖片縱向平鋪CSS背景Y縱向平鋪代碼:body{:url(/-logo-)-y}平鋪重復圖片背景效果截圖:縱向Y軸方向垂直平鋪圖片背景截圖8、全網頁背景圖片重復平鋪圖片背景全屏網頁重復平鋪關鍵代碼:body{:url(/-logo-)}截圖:圖片作為背景全屏平鋪顯示截圖說明:這里沒有設置是否重復,是否居左居右,只設置背景引入圖片即可簡便地實現圖片自然全屏平鋪二、CSS背景顏色1、