Day 13 CSS中替元素加上背景圖

2024 iThome 鐵人賽

DAY 13

自我挑戰組

從零開始的ＨＴＭＬ系列第 13 篇

16th鐵人賽

s_c_o_t_t

團隊iT 貓貓教

2024-08-24 16:29:46

507 瀏覽

分享至

在CSS中，可以使用background-image屬性來為元素設置背景圖片。這個屬性允許你為任何元素（如<div>、<p>或<body>等）指定一個圖片作為背景。除了基本的背景圖片設定，還可以使用多種屬性來調整背景圖的顯示方式，例如定位、重複模式、大小等。

基本語法如下：

selector {
    background-image: url('image-path');
}

url('image-path')用於指定背景圖片的路徑，可以是相對路徑或絕對路徑。此屬性常與其他背景屬性一起使用，如background-repeat（控制背景圖的重複方式）、background-position（控制背景圖的位置）以及background-size（控制背景圖的大小）。

舉個例子，假設我們有一個<div>元素，我們想為它設置一個背景圖，並且希望背景圖能覆蓋整個元素，不重複顯示，且在中央位置。可以這樣寫：

<!DOCTYPE html>
<html lang="zh-TW">
<head>
    <meta charset="UTF-8">
    <title>背景圖示範</title>
    <style>
        .example {
            width: 300px;
            height: 200px;
            background-image: url('path/to/image.jpg');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
        }
    </style>
</head>
<body>
    <div class="example"></div>
</body>
</html>

在這個例子中，background-size: cover;確保背景圖會縮放以完全覆蓋元素，background-position: center;讓背景圖在容器中居中顯示，background-repeat: no-repeat;則防止背景圖重複。