background-color
• background-color屬性用來為元素設置背 景顏色。
• 需要指定一個顏色值，當指定了一個顏色 以後，整個元素的可見區域都會使用這個 顏色作為背景色。
• 如果不設置背景顏色，元素默認背景顏色 為透明，實際上會顯示父元素的背景顏色。
background-image
• background-image可以為元素指定背景 圖片。
• 和background-color類似，這不過這裡是 用的是一個圖片作為背景。
• 需要一個url地址作為參數，url地址需要指 向一個外部圖片的路徑 • 例如：
background-image: url(1.jpg)
background-repeat
• background-repeat用於控制背景圖片的 重複方式。
• 如果只設置背景圖片默認背景圖片將會使 用平鋪的方式，可以通過該屬性進行修改。
• 可選值：
– repeat：默認值，圖片左右上下平鋪
– no-repeat：只顯示圖片一次，不會平鋪
– repeat-x：沿x軸水平平鋪一張圖片
– repeat-y：沿y軸水平平鋪一張圖片
background-position
• background-position用來精確控制背景 圖片在元素中的位置。
• 可以通過三種方式來確定圖片在水平方向 和垂直方向的起點。
– 關鍵字：top right bottom left center
– 百分比
– 數值
background-attachment
• background-attachment用來設置背景圖 片是否隨頁面滾動。
• 可選值：
– scroll：隨頁面滾動
– fixed：不隨頁面滾動
background
• background是背景的簡寫屬性，通過這個 屬性可以一次性設置多個樣式，而且樣式 的順序沒有要求。
• 例如： background: green url(1.jpg) no-repeat center center fixed;
CSS Sprite
• CSS Sprites是一種網頁圖片應用處理方式。
• 通過這種方式我們可以將網頁中的零星圖 片集中放到一張大圖上。
• 這樣一來，一次請求便可以同時加載多張 圖片，大大提高了圖片的加載效率。
原創文章，作者：投稿專員，如若轉載，請註明出處：https://www.506064.com/zh-hant/n/268759.html
微信掃一掃 
支付寶掃一掃 