如何僅使用 CSS 在背景圖片上疊加顏色？

使用CSS 為影像疊加顏色

尋求一種透過在背景影像上疊加顏色來增強網站視覺效果的方法，而無需使用額外的資源元素？ CSS 提供了一種優雅的解決方案，無需額外的 DIV 或懸停效果。

利用漸變進行疊加

一種方法涉及利用多個背景。例如，您可以在影像上建立半透明漸層：

html {
  min-height: 100%;
  background:
    linear-gradient(0deg, rgba(255, 0, 150, 0.3), rgba(255, 0, 150, 0.3)),
    url(image.jpg);
  background-size: cover;
}

使用嵌入陰影

或者，您可以建立實質的嵌入陰影：

.overlay {
  inset: 0;
  box-shadow: inset 0 0 9999px 100% rgba(0, 0, 0, 0.8);
}

將此CSS在區塊插入背景的父元素中

這兩種技術都達到了預期的效果，允許您僅使用 CSS 將單色疊加添加到背景圖像中。

以上是如何僅使用 CSS 在背景圖片上疊加顏色？的詳細內容。更多資訊請關注PHP中文網其他相關文章！