iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 5
2
Modern Web

從Stack Overflow學前端系列 第 5

從StackOverflow上學CODING(5)甚麼時候用img或background-image?

  • 分享至 

  • xImage
  •  

https://stackoverflow.com/questions/492809/when-to-use-img-vs-css-background-image
​作者原文:

In what situations is it more appropriate to use an HTML IMG tag to display an image, as opposed to a CSS background-image, and vice-versa?
在甚麼樣的情況下用Html img tag來呈現圖像會比CSS background-image適合,反之亦然?

Factors may include accessibility, browser support, dynamic content, or any kind of technical limits or usability principles.
考量的條件可能有無障礙設計、瀏覽器支持、內容的多樣性、或者任何的技術限制、可用性原則

我也一直很好奇的問題,即便我一直認為background-image是比較好的方式因為比較容易操控


綜合回答內容中整理的幾個比較合理的情況:

適合使用IMG的情況:
1.如果你認為使用者有可能會需要列印你網頁的內容時
2.如果語意上有其重要性:例如一個警告icon
3.使用IMG alt如果你的圖片是內容之一,像是LOGO或者人像
4.如果你的圖片可能會被時常伸縮時

甚麼時候使用backgroud-image?
1.如果圖片不算是內容的一部分
2.如果需要字體與圖片重疊
3.如果想要整體載入速度更快
4.如果只想要圖片的一部分被看到


上一篇
從StackOverflow上學CODING(4)如何讓div或別的元素重疊
下一篇
從StackOverflow上學CODING(6)宣告一個變數並賦予一個函式值與建立一個函示並命名的差別
系列文
從Stack Overflow學前端30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言