Board logo

標題: CSS 背景設定 (一) [打印本頁]

作者: 陳育霖    時間: 2023-8-12 11:32     標題: CSS 背景設定 (一)

本帖最後由 陳育霖 於 2023-8-12 11:50 編輯

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





歡迎光臨 種子論壇 | 高雄市資訊培育協會學員討論區 (http://seed.istak.org.tw/) Powered by Discuz! 7.2