可以將 Img srcset 轉換為背景圖像嗎？

Question

我有一個響應式 header 部分，但我需要將圖像從<img>標記傳輸到background-image - 這可能嗎？

以下是當前的img標簽：

<img src="img/images-header.jpg"
     srcset="img/images-header@2x.jpg 2x,
             img/images-header@3x.jpg 3x"
     class="Images-Header">

CSS 是

.Images-Header {
  width: 320px;
  height: 456px;
  margin: 60px 0 0;
  padding: 105px 29px;
  object-fit: contain;
}

基本上，我需要跨設備響應圖像，是否可以將 srcset 設置為背景圖像或相同的效果？

非常感謝，

Answer 1

不，那是不可能的。 但是您可以使用媒體查詢來加載不同版本/大小的背景圖像，具體取決於屏幕尺寸或其他@media 參數（如像素比率或類似參數）。