技術類文章

金魚也能學會寫網頁-網頁背景

一開始只是興趣使然，寫了一篇關於網頁框架的簡單筆記，不過幾經思考後，還是想把它寫成網頁相關的系列筆記，希望在忘了一些東西時，能有個地方可以快速找回記憶。☺️

💡 Hint: 以下筆記內容所使用的作業系統為"Windows 10"

📝 設定背景圖

background-image

將特定素材指定為背景圖，預設水平和垂直均重複(repeat)，讓圖片填滿整個元素

1
2
3
<div id="wrap">
    <h1 id="header">標題</h1>
</div>
1
2
3
4
5
6
7
8
9
body{               /*url(背景圖位址)*/
    background-image: url(https://bit.ly/3fSyTov);
}

#header{
    color: #ecbaba;
    font-size: 250%;
    text-align: center;
}

background-repeat

設定背景圖重複方向，值: repeat(重複X軸和Y軸)、repeat-x(重複)、repeat-y(重複Y軸)、no-repeat(不重複)

1
2
3
<div id="wrap">
    <h1 id="header">標題</h1>
</div>
1
2
3
4
5
6
7
8
9
10
11
body{               /*url(背景圖位址)*/
    background-image: url(https://bit.ly/3fSyTov);
    background-repeat: no-repeat;/*圖片不重複*/
    
}

#header{
    color: #ecbaba;
    font-size: 250%;
    text-align: center;
}

background-position

設定背景圖的位置，水平方向值可為 left、center、right，垂直方向值可為 top、center、bottom，也可以用 px 等單位進行設定，預設是 left top (左上角)。

1
2
3
<div id="wrap">
    <h1 id="header">標題</h1>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
body{               /*url(背景圖位址)*/
    background-image: url(https://bit.ly/3fSyTov);
    background-repeat: no-repeat;/*圖片不重複*/
    background-position: center center;
    
}

#header{
    color: #ecbaba;
    font-size: 250%;
    text-align: center;
}

統整設定背景圖屬性

背景圖的相關屬性，可以用屬性簡寫(Shorthand)的方式統整設定。只要將背景圖相關的屬性值一起輸入並以“半形”空白做區隔即可，未指定的值會以預設值自動帶入。設定 background 屬性時，並沒有一定的順序，可依照個人習慣的順序填寫。

1
2
3
<div id="wrap">
    <h1 id="header">標題</h1>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
body{               
  /*background-image: url(https://bit.ly/3fSyTov);
    background-repeat: no-repeat;
    background-position: center center;*/
    
    background: #fff6e6 url(https://bit.ly/3fSyTov) no-repeat center bottom; 
}

#header{
    color: #ecbaba;
    font-size: 250%;
    text-align: center;
}

分享到