最近，在從事客戶(hù)端項(xiàng)目時(shí)，我需要對(duì)圖像的特定視覺(jué)效果。背景圖像，使用background-attachment: fixed; ，很容易達(dá)到這種固定的滾動(dòng)效果 - 即使頁(yè)面滾動(dòng)，圖像仍然保持靜止。這種效果雖然不經(jīng)常使用，但可能會(huì)引人注目，尤其是在巧妙地應(yīng)用時(shí)。

目錄

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

最初，我旨在使用內(nèi)聯(lián)圖像復(fù)制此固定效果（<img alt="使用內(nèi)聯(lián)圖像搜索固定的背景效果" > ）代替CSS背景圖像。這里提供了所需效果的演示。此演示的代碼在此GIT存儲(chǔ)庫(kù)中（注意：這是一個(gè)Next.js項(xiàng)目）。將以RAW HTML的簡(jiǎn)化Code??pen示例。

為什么使用<img alt="使用內(nèi)聯(lián)圖像搜索固定的背景效果" >而不是background-image ？

有幾個(gè)原因激發(fā)了我對(duì)<img alt="使用內(nèi)聯(lián)圖像搜索固定的背景效果" >標(biāo)簽：

• 更容易的懶惰加載。
• 通過(guò)alt文本改進(jìn)了SEO和可訪問(wèn)性。
• 使用srcset / sizes優(yōu)化加載性能。
• 通過(guò)瀏覽器優(yōu)化圖像選擇<picture></picture>標(biāo)簽。
• 直接為用戶(hù)保存圖像（無(wú)DevTools）。

使用<img alt="使用內(nèi)聯(lián)圖像搜索固定的背景效果" >當(dāng)圖像被認(rèn)為是內(nèi)容而不是僅裝飾時(shí)，通常是優(yōu)選的標(biāo)簽。我的解決方案涉及clip-path CSS屬性。讓我們將其與background-image方法進(jìn)行比較。

1。使用CSS background-image

傳統(tǒng)方法使用background-image ：

 。
  背景圖像：url（“ nice_bg_image.jpg”）;
  背景重復(fù)：無(wú)重復(fù)；
  背景大小：封面；
  背景位置：中心；
  背景 - 固定；
}

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

2。在內(nèi)聯(lián)圖像上使用clip-path技巧

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

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

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

這種方法保持<img alt="使用內(nèi)聯(lián)圖像搜索固定的背景效果" >標(biāo)簽的優(yōu)勢(shì)。但是，它不太簡(jiǎn)潔， clip-path提出了挑戰(zhàn)。例如，像border-radius這樣的簡(jiǎn)單樣式需要對(duì)clip-path本身進(jìn)行修改。 clip-path內(nèi)的精確圖像定位也可能很復(fù)雜。

更好的方法？

最終，我恢復(fù)使用CSS background-image ，承認(rèn)其局限性。是否有人以更優(yōu)雅的方式成功地以?xún)?nèi)聯(lián)圖像實(shí)現(xiàn)了這種固定的滾動(dòng)效果？我很高興聽(tīng)到您的解決方案！

以上是使用內(nèi)聯(lián)圖像搜索固定的背景效果的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！