本帖最後由 陳育霖 於 2023-8-12 11:50 編輯
背景重複出現: background-repeat
repeat 預設,水平方向和垂直方向重複出現,repeat-x 水平方向重複出現,repeat-y 垂直方向重複出現,no-repeat 只顯示一次- body {
- backgorund-image: url(sea.jpg);
- backgorund-repeat: no-repeat;
- }
複製代碼 背景圖片位置 background-position
left top、left center、left bottom、right top等,x% y%- body{
- background-image: url(sea.jpg);
- background-position: 30% 30%;
- }
- body{
- background-image: url(sea.jpg);
- background-position: 40px 30px;
- }
複製代碼 背景圖片大小: background-size
auto 預設、length 寬度或高度、percentage 以父元素的百分比來設定、cover、contain- body {
- background-image: url(sea.jpg);
- background-size: cover;
- }
複製代碼 背景圖片隨內容捲動 background-attachment
scroll 預設,fixed 不會捲動,local 在inframe顯示時,不會捲動- body {
- background-image: url(sea.jpg);
- background-size: cover;
- background-attachment: fixed ;
- }
複製代碼 |