我們接著昨天的進度繼續做
1.background屬性的寫法
background屬性的值一次設定與背景有關的8種CSS屬性。
background的寫法:background:url(檔案路徑) no-repeat right center/cover;
url(檔案路徑):background-image
no-repeat:background-repeat
right center:background-position
cover:background-size
在設定background-size時,請記得一定要在background-position的值後面加上/(斜線)。
以上四個屬性,加上background-color、background-attachment、background-clip、
background-origin,總共可以設定8種屬性。
background-size的關鍵字:
設定background-size(背景圖大小)的值大小時,常常會使用「cover」或「contain」這些關鍵字,請先了解這兩者的差異。
cover:
(一)在維持長寬比的狀態下,盡可能放大指定元素,覆蓋整個背景
(二)裁切出超出範圍的部分
contain:
(一)在維持長寬比的狀態下,縮放顯示整個影像
2.置入顯示捲動的「Scroll」符號
(一)設定元素配置方法的屬性:postion:~;
:在值輸入static、relative、absolute、fixed、stickly其中一個。
(二)設定位置的屬性left:~;
、right:~;
、top:~;
、bottom:~;
:只有設定位置的元素(以position屬性設定除了static以外的值的元素)有效果,在值輸入設定位置,含有單位的數值。
今天先做到這裡明天再繼續!