原文連結: https://appcs342.blogspot.com/2022/03/img-background-image.html
移植時的最後更新日期: 2022-03-26T01:01:42.352-07:00

一個是html標籤的img，一個是css的background-image，兩個都能讓網頁中顯示出圖片。

我自己目前個人遇到的狀況會使用img > background-image 。


img:

會使用img的情況通常是：

  • 網頁不只是需要單純的一張圖片而已，還需要像是超連結的功能，或是想讓圖片能夠縮小放大。
  • 有需要使用動畫的時候，因為img的動畫表現會比background-image更好。
  • 影印頁面時，圖片也想跟著被印出來。

 background-image:

簡單來說，是像是網頁中當背景圖片的感覺，意味著background-image其實並沒有自己本身的意義存在，它沒有辦法去代表網頁中內容的任何事情。

會使用的狀況：
  • 圖片不是內容的一部分（設計考量）。
  • 網頁需要有圖片當背景。
  • 影印頁面時，圖片不想跟著被印出來。


小結：

img是屬於頁面內容的一部分，它是擁有含義的圖片。
background-image則是不屬於頁面內容的一部分，它是沒有含義，可以拿來單純當作背景的圖片。