標題:
CSS 背景設定 (一)
[打印本頁]
作者:
陳育霖
時間:
2023-8-12 11:32
標題:
CSS 背景設定 (一)
本帖最後由 陳育霖 於 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 ;
}
複製代碼
歡迎光臨 種子論壇 | 高雄市資訊培育協會學員討論區 (http://istak.org.tw/seed/)
Powered by Discuz! 7.2