HTML - 背景圖片

HTML 允許我們為 div、span、table 等元素或整個頁面設定背景圖片。

如何設定背景圖片？

您可以使用 CSS 的 background-image 屬性為任何 HTML 元素設定背景圖片。您還可以使用 HTML 的 background 屬性為 HTML 元素或整個頁面設定背景。background 屬性已棄用，建議使用 CSS 樣式表進行背景設定。以下是使用任何 HTML 標籤設定背景圖片的語法。

在 HTML 中

<tag background="URL/of/image">

在 CSS 中

tag {
    background-image: url('URL/of/image"');
    background-repeat: no-repeat;
}

示例

以下示例演示如何為網頁設定背景圖片。

<!DOCTYPE html>
<html lang="en">

<head>
<style>
    div{
        background-color: rgba(255, 255, 255, 0.8);
        padding: 20px;
    }
</style>
</head>

<body background="/html/images/logo.png">
    <div>
        <h1>Welcome to My Website</h1>
        <p>
            This is an example of setting a 
            background image using HTML 
            attributes.
        </p>
    </div>
</body>

</html>

背景重複屬性

有時我們為元素設定的背景圖片不足以覆蓋元素的全部區域。在這種情況下，圖片將水平和垂直重複，直到到達元素的末尾。為了避免背景圖片重複，您可以將 background-repeat 屬性設定為 no-repeat。

示例

以下示例演示如何使用背景圖片重複屬性。這解釋瞭如何在 HTML 中使用 repeat、repeat-x 和 repeat-y 屬性。

<!DOCTYPE html>
<html lang="en">
<head>
<title>Background Repeat Example</title>
<style>
    body {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
        }

    div {
        width: 600px;
        height: 200px;
        border: 1px solid black;
        display: flex;
        justify-content: center;
        align-items: center;
        background-image: url('/html/images/logo.png'); 
    }

    .repeat-x {
        background-repeat: repeat-x;
    }

    .repeat-y {
        background-repeat: repeat-y;

    }

    .repeat {
        background-repeat: repeat;

    }
</style>
</head>

<body>
    <h2>Repeat-X</h2>
    <div class="repeat-x">
    </div>

    <h2>Repeat-Y</h2>
    <div class="repeat-y">
    </div>

    <h2>Repeat</h2>
    <div class="repeat">
    </div>
</body>

</html>

背景覆蓋

如果希望背景圖片覆蓋整個元素，可以將 background-size 屬性設定為 cover。透過設定此屬性，背景圖片將覆蓋所有元素部分，而不會拉伸。

示例

以下示例演示如何在整個元素區域覆蓋圖片。

<!DOCTYPE html>
<html lang="en">

<head>
<style>
    .background-cover {
        background-image: url('/html/images/logo.png');
        /* Cover the entire container */
        background-size: cover; 
        /* Center the image */
        background-position: center; 
        background-repeat: no-repeat;
        width: 100%;
        height: 150px;
        color: white;
        text-shadow: 1px 1px 2px black;
        border: 2px solid #ccc;
    }
</style>
</head>

<body>
    <div class="background-cover">
        <h1>Welcome to My Website</h1>
    </div>
</body>
</html>

背景拉伸屬性

透過將 background-size 屬性設定為 100%，您可以拉伸圖片以適應元素。

示例

以下示例演示如何使用拉伸屬性。

<!DOCTYPE html>
<html lang="en">
<head>

<style>
    body {
        height: 100vh;
    }
    .background-stretch {
        background-image: url('/html/images/logo.png'); 
        /* Stretch the image to cover Div */
        background-size: 100% 100%;
        width: 80%;
        height: 80%;
        border: 2px solid;
    }
</style>
</head>

<body>
    <div class="background-stretch">
    </div>
</body>
</html>

列印頁面