使用CSS的background-image實現背景圖片

一、什麼是background-image

CSS中的background-image屬性可以用來設置一個元素的背景圖片。可以使用圖片的相對或絕對URL來指定圖片。若想使用預加載的任何圖片，應使用相對URL指定它，並且一定要依據網站的文件組織結構來指定。

二、如何使用background-image

要使用背景圖片可以按如下代碼處理：

    .example-class {
        background-image: url('example-image.png');
    }

為了使背景圖像以另一種方式進行排列或縮放，可以使用background-position、background-repeat和background-size屬性。下面是具體用法：

• background-position屬性用於定位背景圖片在元素中的位置。

    .example-class {
        background-image: url('example-image.png');
        background-position: center;
    }

• background-size屬性用於定義背景圖片的大小。

以百分數或像素為單位，也可以使用cover和contain值：

    .example-class {
        background-image: url('example-image.png');
        background-position: center;
        background-size: cover;
    }

• background-repeat屬性用於設置背景圖片是否重複。

    .example-class {
        background-image: url('example-image.png');
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
    }

三、background-image的優點

使用background-image代替元素是有優點的。以下是其中一些優點:

• background-image不會被搜索引擎索引，因此對於大量的元素，可以通過減少元素的數量來提高搜索引擎優化（SEO）。
• background-image可以放置在HTML元素上，而不會導致焦點管理問題。 這意味着鼠標事件（單擊、雙擊、鼠標懸停）可以在圖像之上更好地處理。
• background-image 與 img 元素不同，其數據不會影響頁面的可訪問性（accessibility）和可用性（usability）。

四、使用background-image的注意事項

了解一些使用 background-image 的常見注意事項可以幫助您發揮其功能。以下是一些基本提示和技巧：

• 背景圖片應該是純粹的裝飾元素應該用於將圖像顯示在文檔中。
• 背景圖片應符合了解可訪問性最佳實踐(Knowledge of Accessibility Best Practices)的內容。
• 如果使用多個背景圖像，請確保它們適當地層疊和顯示。
• 注意背景圖片大小。不要使用大範圍背景圖片以大小，不能影響性能。