與背景相關的CSS屬性

Articles

CSS 簡介

與背景相關的CSS屬性

本文將解釋與背景相關的CSS屬性。

您可以學習如何設定背景屬性，例如背景設置、位置以及重複方式等。

YouTube Video

建立用於預覽的 HTML

css-background.html

  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>CSS Properties Example</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-background.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>Background-Related CSS Properties Example</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header>
 19            <h2>Background And Decoration</h2>
 20        </header>
 21        <article>
 22            <h3>background-color</h3>
 23            <section>
 24                <header><h4>background-color: red</h4></header>
 25                <section class="sample-view">
 26                    <div class="red-example">This is a red background.</div>
 27                </section>
 28                <header><h4>background-color: #FF5733</h4></header>
 29                <section class="sample-view">
 30                    <div class="hex-example">This is a background with hex color (#FF5733).</div>
 31                </section>
 32                <header><h4>background-color: rgb(255, 87, 51)</h4></header>
 33                <section class="sample-view">
 34                    <div class="rgb-example">This is a background with RGB color (rgb(255, 87, 51)).</div>
 35                </section>
 36                <header><h4>background-color: rgba(255, 87, 51, 0.7)</h4></header>
 37                <section class="sample-view">
 38                    <div class="rgba-example">This is a background with RGBA color (rgba(255, 87, 51, 0.7)).</div>
 39                </section>
 40                <header><h4>background-color: hsl(14, 100%, 60%)</h4></header>
 41                <section class="sample-view">
 42                    <div class="hsl-example">This is a background with HSL color (hsl(14, 100%, 60%)).</div>
 43                </section>
 44                <header><h4>background-color: hsla(14, 100%, 60%, 0.7)</h4></header>
 45                <section class="sample-view">
 46                    <div class="hsla-example">This is a background with HSLA color (hsla(14, 100%, 60%, 0.7)).</div>
 47                </section>
 48                <header><h4>background-color: transparent</h4></header>
 49                <section class="sample-view">
 50                    <div class="transparent-example">This is a background with transparency (transparent).</div>
 51                </section>
 52            </section>
 53        </article>
 54        <article>
 55            <h3>background-image</h3>
 56            <section>
 57                <header><h4>background-image: url('image.jpg')</h4></header>
 58                <section class="sample-view">
 59                    <div class="background-image-example">This is a background image.</div>
 60                </section>
 61                <header><h4>background-image: linear-gradient(to right, red, blue)</h4></header>
 62                <section class="sample-view">
 63                    <div class="background-image-gradient">This is a background gradient.</div>
 64                </section>
 65            </section>
 66        </article>
 67        <article>
 68            <h3>background-position</h3>
 69            <section>
 70                <header><h4>background-position: top left</h4></header>
 71                <section class="sample-view">
 72                    <div class="top-left-example">Top Left</div>
 73                </section>
 74                <header><h4>background-position: center</h4></header>
 75                <section class="sample-view">
 76                    <div class="center-example">Center</div>
 77                </section>
 78                <header><h4>background-position: bottom right</h4></header>
 79                <section class="sample-view">
 80                    <div class="bottom-right-example">Bottom Right</div>
 81                </section>
 82            </section>
 83        </article>
 84        <article>
 85            <h3>background-size</h3>
 86            <section>
 87                <header><h4>background-size: cover</h4></header>
 88                <section class="sample-view">
 89                    <div class="cover-example">Cover</div>
 90                </section>
 91                <header><h4>background-size: contain</h4></header>
 92                <section class="sample-view">
 93                    <div class="contain-example">Contain</div>
 94                </section>
 95                <header><h4>background-size: 100px 100px</h4></header>
 96                <section class="sample-view">
 97                    <div class="fixed-size-example">100px by 100px</div>
 98                </section>
 99            </section>
100        </article>
101        <article>
102            <h3>background-repeat</h3>
103            <section>
104                <header><h4>background-repeat: repeat</h4></header>
105                <section class="sample-view">
106                    <div class="repeat-example">Repeat</div>
107                </section>
108                <header><h4>background-repeat: repeat-x</h4></header>
109                <section class="sample-view">
110                    <div class="repeat-x-example">Repeat X</div>
111                </section>
112                <header><h4>background-repeat: no-repeat</h4></header>
113                <section class="sample-view">
114                    <div class="no-repeat-example">No Repeat</div>
115                </section>
116                <header><h4>background-repeat: space</h4></header>
117                <section class="sample-view">
118                    <div class="space-example">Space</div>
119                </section>
120                <header><h4>background-repeat: round</h4></header>
121                <section class="sample-view">
122                    <div class="round-example">Round</div>
123                </section>
124            </section>
125        </article>
126    </main>
127</body>
128</html>

背景和裝飾

`background-color` 屬性

 1/* Background color specification */
 2.red-example {
 3    background-color: red;
 4}
 5
 6.hex-example {
 7    background-color: #FF5733;
 8}
 9
10.rgb-example {
11    background-color: rgb(255, 87, 51);
12}
13
14.rgba-example {
15    background-color: rgba(255, 87, 51, 0.7);
16}
17
18.hsl-example {
19    background-color: hsl(14, 100%, 60%);
20}
21
22.hsla-example {
23    background-color: hsla(14, 100%, 60%, 0.7);
24}
25
26.transparent-example {
27    background-color: transparent;
28    color: black;
29}

background-color 屬性在CSS中用於設置一個元素的背景顏色。您可以指定顯示於文字和其他元素後方的顏色，顏色可以用多種格式定義。指定顏色的方法與 color 屬性類似，但您也可以使用 transparent 設置完全透明的背景。

說明：

red-example 類別使用關鍵字將背景色設置為紅色。
hex-example 類別使用十六進制代碼設置背景色。
rgb-example 類別使用 RGB 格式設置背景色。
rgba-example 類別使用 RGBA 格式設置背景色，並添加透明度。
hsl-example 類別使用 HSL 格式設置背景色。
hsla-example 類別使用 HSLA 格式設置背景色，並添加透明度。
transparent-example 類別將背景設置為透明。

`background-image` 屬性

 1/* Background image styles */
 2.background-image-example {
 3    /* Specify the image URL */
 4    background-image: url('image.jpg');
 5    /* Scale the image to cover the entire element */
 6    background-size: cover;
 7    /* Center the image */
 8    background-position: center;
 9    /* Disable image repetition */
10    background-repeat: no-repeat;
11    color: white;
12    display: flex;
13    align-items: center;
14    justify-content: center;
15}
16
17/* Gradient background styles */
18.background-image-gradient {
19    /* Gradient from left to right */
20    background-image: linear-gradient(to right, red, blue);
21    color: white;
22    display: flex;
23    align-items: center;
24    justify-content: center;
25}

background-image 屬性用於將一張圖片設為元素的背景。指定的圖片將顯示為元素的背景，並且其大小、位置及重複方式可以透過其他相關屬性進行調整。我們稍後還會講解相關屬性例如 background-size、background-position 和 background-repeat。

說明：

background-image-example 類別使用 background-image 屬性將 image.jpg 設為背景圖像。background-size: cover 使影像覆蓋整個元素，而 background-position: center 將影像置中。使用 background-repeat: no-repeat 可以禁用背景重複。
background-image-gradient 類別使用 linear-gradient() 設置從紅色到藍色的背景漸層。漸層從左到右顯示。

可以指定的值的類型

background-image 屬性可以接受以下值。

url(): 指定背景圖片的URL。在 url() 中包含圖片檔案。 (ex.url('image.jpg'))
none: 指定不設置背景圖片。這是默認值。
漸層: 可以使用CSS漸層功能作為背景圖片。 (ex.linear-gradient(), radial-gradient())

`background-image` 屬性的關鍵點

圖片大小與定位: 背景圖片的大小與定位可以通過其他屬性進行精細調整，以支持設計需求。比如，設置 background-size: cover 將圖像拉伸以覆蓋整個區域，消除任何被裁剪的部分。
使用漸層：您可以將漸層用作背景，而不是圖片，為設計增添動態元素。

`background-position` 屬性

 1/* Positioned at the top-left */
 2.top-left-example {
 3    background-image: url('image.jpg');
 4    background-position: top left;
 5    background-size: cover;
 6    background-repeat: no-repeat;
 7    background-color: lightblue;
 8    height: 100px;
 9}
10
11/* Centered */
12.center-example {
13    background-image: url('image.jpg');
14    background-position: center;
15    background-size: cover;
16    background-repeat: no-repeat;
17    background-color: lightcoral;
18    height: 100px;
19}
20
21/* Positioned at the bottom-right */
22.bottom-right-example {
23    background-image: url('image.jpg');
24    background-position: bottom right;
25    background-size: cover;
26    background-repeat: no-repeat;
27    background-color: lightgreen;
28    height: 100px;
29}

background-position 屬性用於指定背景圖片在元素內的位置。通過控制背景圖片在元素內的位置，你可以設計出符合需求的佈局。預設值為 0% 0%，將圖片放置在左上角。

說明：

top-left-example 類別將圖像位置指定為 top left，將圖像放置在左上角。
center-example 類別使用 center 屬性將圖像置於中心位置。
bottom-right-example 類別將圖像位置指定為 bottom right，將圖像放置在右下角。

可以指定的值的類型

background-position 屬性可以接受以下類型的值。

關鍵字: 可以指定 left、right、top、bottom 或 center。
- 指定 center 將把背景圖片放置於元素的中心。
- 指定 right 將背景圖片放置於右側。
- 指定 top left 將背景圖片放置於左上角。
- 指定為 bottom right 將使背景圖像放置在右下角。
長度或百分比：您可以指定類似於 10px 20px，50% 50% 的值。
- 指定為 10px 20px 將使背景圖像距離左邊 10px 且距離上方 20px。
- 指定為 50% 50% 將使背景圖像在水平和垂直方向上居中。
calc() 函數：使用 CSS 計算允許更精確的定位。

`background-size` 屬性

 1/* Fit the image to cover the entire area */
 2.cover-example {
 3    background-image: url('image.jpg');
 4    /* The image covers the entire element */
 5    background-size: cover;
 6    background-color: lightblue;
 7}
 8
 9/* Fit the image within the element */
10.contain-example {
11    background-image: url('image.jpg');
12    /* The image fits within the element */
13    background-size: contain;
14    background-color: lightgreen;
15}
16
17/* Display at a fixed size */
18.fixed-size-example {
19    background-image: url('image.jpg');
20    /* Fixed width of 100px and height of 100px */
21    background-size: 100px 100px;
22    background-color: lightcoral;
23}

background-size 屬性用於指定元素的背景圖像大小。通過使用此屬性，您可以調整背景圖像的顯示方式，無論是填滿整個元素還是保持其原始大小，以符合設計需求。默認值為 auto，它保持背景圖像的原始大小。

說明：

cover-example 類別指定 cover。圖像將被放大以覆蓋整個元素，但某些部分可能會被裁剪。
contain-example 類別指定 contain。圖像將被調整以適應元素內部，但可能會出現一些空白區域。
fixed-size-example 類別為背景圖像指定固定大小，寬度和高度各設置為 100px。

可以指定的值的類型

background-size 屬性可以設置以下類型的值。

關鍵詞
- auto：保留圖像的默認大小（寬度和高度將自動確定）。
- cover：調整背景圖像的大小以完全覆蓋元素。它將填滿整個元素，但圖像的部分可能會被裁剪。
- contain：調整圖像以適應元素內部，但不覆蓋整個元素。圖像的縱橫比將被保留。
數值（px, %, em 等）
- 寬度和高度：明確指定寬度和高度。如果只指定了一個值，該值將應用於寬度，並且高度將自動調整。
- 百分比：將背景圖像的大小指定為元素大小的百分比。例如，50% 50% 將圖片設置為元素寬度和高度的一半。

`background-repeat` 屬性

 1/* Repeat vertically and horizontally */
 2.repeat-example {
 3    background-image: url('pattern.png');
 4    background-repeat: repeat;
 5    background-size: auto;
 6}
 7
 8/* Repeat only horizontally */
 9.repeat-x-example {
10    background-image: url('pattern.png');
11    background-repeat: repeat-x;
12    background-size: auto;
13}
14
15/* No repetition */
16.no-repeat-example {
17    background-image: url('pattern.png');
18    background-repeat: no-repeat;
19    background-size: auto;
20}
21
22/* Space out evenly */
23.space-example {
24    background-image: url('pattern.png');
25    background-repeat: space;
26    background-size: auto;
27    width: 90px;
28    height: 60px;
29}
30
31/* Resize and repeat */
32.round-example {
33    background-image: url('pattern.png');
34    background-repeat: round;
35    background-size: auto;
36}

background-repeat 屬性用於控制元素的背景圖像如何重複。默認情況下，背景圖片在元素內會水平和垂直方向上重複，但您可以使用此屬性來自定義其重複行為。

說明：

repeat-example 類別將圖像在垂直和水平方向上都重複顯示。
repeat-x-example 類別僅在水平方向上重複圖像。
no-repeat-example 類別僅顯示一次圖像，且不重複。
space-example 類別將背景圖像平均排列，各圖像之間保持相等間距。
round-example 類別自動調整背景圖像大小以重複填充整個元素。

可指定的值

background-repeat 屬性可以設置以下類型的值。

repeat：背景圖片沿 X 軸（水平方向）和 Y 軸（垂直方向）重複。這是默認值。
repeat-x：背景圖片僅沿 X 軸（水平方向）重複。
repeat-y：背景圖片僅沿 Y 軸（垂直方向）重複。
no-repeat：背景圖片不重複，僅顯示一次。
space：背景圖片以固定間隔重複，間距均等。
round：背景圖片會重複，但大小將調整以填滿整個元素。圖片可能會被調整大小。

您可以在我們的 YouTube 頻道上使用 Visual Studio Code 來跟隨上述文章一起學習。請也查看我們的 YouTube 頻道。

YouTube Video

與盒模型相關的CSS屬性與框模型裝飾相關的CSS屬性

與背景相關的CSS屬性

YouTube Video

建立用於預覽的 HTML

背景和裝飾

background-color 屬性

說明：

background-image 屬性

說明：

可以指定的值的類型

background-image 屬性的關鍵點

background-position 屬性

說明：

可以指定的值的類型

background-size 屬性

說明：

可以指定的值的類型

background-repeat 屬性

說明：

可指定的值

YouTube Video

`background-color` 屬性

`background-image` 屬性

`background-image` 屬性的關鍵點

`background-position` 屬性

`background-size` 屬性

`background-repeat` 屬性