使用內聯圖像搜索固定的背景效果

最近，在從事客戶端項目時，我需要對圖像的特定視覺效果。背景圖像，使用background-attachment: fixed; ，很容易達到這種固定的滾動效果 - 即使頁面滾動，圖像仍然保持靜止。這種效果雖然不經常使用，但可能會引人注目，尤其是在巧妙地應用時。

目錄

• 為什麼使用<img alt="使用內聯圖像搜索固定的背景效果" >而不是background-image ？
• 使用CSS background-image
• 內聯圖像的clip-path技巧
• 更好的方法？

最初，我旨在使用內聯圖像複製此固定效果（<img alt="使用內聯圖像搜索固定的背景效果" > ）代替CSS背景圖像。這裡提供了所需效果的演示。此演示的代碼在此GIT存儲庫中（注意：這是一個Next.js項目）。將以RAW HTML的簡化Code​​pen示例。

為什麼使用<img alt="使用內聯圖像搜索固定的背景效果" >而不是background-image ？

有幾個原因激發了我對<img alt="使用內聯圖像搜索固定的背景效果" >標籤：

• 更容易的懶惰加載。
• 通過alt文本改進了SEO和可訪問性。
• 使用srcset / sizes優化加載性能。
• 通過瀏覽器優化圖像選擇<picture></picture>標籤。
• 直接為用戶保存圖像（無DevTools）。

使用<img alt="使用內聯圖像搜索固定的背景效果" >當圖像被認為是內容而不是僅裝飾時，通常是優選的標籤。我的解決方案涉及clip-path CSS屬性。讓我們將其與background-image方法進行比較。

1。使用CSS background-image

傳統方法使用background-image ：

 。
  背景圖像：url（“ nice_bg_image.jpg”）;
  背景重複：無重複；
  背景大小：封面；
  背景位置：中心；
  背景 - 固定；
}

但是，此方法有局限性。該圖像沒有將其視為內容，從而影響可訪問性（屏幕讀取器）。僅當圖像填充或以視口內為中心時，它也最佳地發揮作用。偏心圖像需要媒體查詢，以在不同設備上正確定位。

2。在內聯圖像上使用clip-path技巧

利用clip-path堆棧溢流解決方案提供了一種替代方法：

 .image-container {
  位置：相對；
  身高：200px;
  剪輯路徑：插圖（0）;
}

。圖像 {
  對象擬合：封面；
  位置：固定；
  左：0;
  頂部：0;
  寬度：100％；
  身高：100％；
}

這種方法保持<img alt="使用內聯圖像搜索固定的背景效果" >標籤的優勢。但是，它不太簡潔， clip-path提出了挑戰。例如，像border-radius這樣的簡單樣式需要對clip-path本身進行修改。 clip-path內的精確圖像定位也可能很複雜。

更好的方法？

最終，我恢復使用CSS background-image ，承認其局限性。是否有人以更優雅的方式成功地以內聯圖像實現了這種固定的滾動效果？我很高興聽到您的解決方案！

以上是使用內聯圖像搜索固定的背景效果的詳細內容。更多資訊請關注PHP中文網其他相關文章！