本節簡介:本節課主要介紹背景屬性在CSS中的作用,了解背景屬性可以完成的功能,以及class類選擇器的功能與應用方法。
本節課同學們做的筆記 點擊播放按鈕可自動定位到對應時間進行播放
背景固定:<attachmen>就是在首頁瀏覽的時候固定一個背景圖片,這個很重要
水平移動:<position>就是說把一張背景圖片覆蓋后,移到自己想要的位置X軸和Y軸,提前把單位設置成PX
css屬性里面<background>就是文字背景的顏色
class選擇器,以.box為選擇器名稱,先設定好格式,在用在需要的地方右擊css樣式,選擇box進行應用
如果想要背景不動,元素動,需要對整個body區塊對樣式定義
background-position:背景偏移調整:改變圖像在盒子中的位置。background-attachment:背景固定;fixed.固定。scroll,背景圖隨著滾動而移動
background簡寫:color,url,repeat,position,attachment 。(position的兩個值不能分開)
background-size:背景大小,cover圖形高度填滿,contain寬度填滿。不要小圖放大、。
background-gradient:背景漸變色。漸變上圖片下,背景改成不重復,軸就會同時看到。
background-attachment:背景固定。fixed.固定。scroll,背景圖隨著滾動而移動
background-position:背景偏移調整:改變圖像在盒子中的位置。貼邊用英文方向設置準確
background-repeat:背景如何重復設置,repeat垂直方向和水平方向重復。repeat-x:圖像將在水平方向重復。repeat-y:圖像將在垂直方向重復。no-repeat:圖像僅顯示一次。
背景圖像 background 重復 background:repeat 水平重復background:repeat-x 垂直重復 background:repeat-y