種子論壇 | 高雄市資訊培育協會學員討論區

標題: 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://seed.istak.org.tw/)