如何在 CSS 中將漸層疊加到背景圖片上？

背景影像上的漸變疊加：揭曉解決方案

無法同時顯示背景影像和漸變疊加可能會令人沮喪。然而，解決方案很簡單，並且在於 CSS 聲明中元素的正確順序。

要在背景底部實現所需的從黑色到透明的淡入淡出效果，以下步驟至關重要：

1. 將背景圖片URL 放置在行尾： 與直覺相反，應該放置背景圖片的URL在漸變聲明之後，如修正後的程式碼所示：

.css {
  background: 
   linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 0.65) 100%),
   url('https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a') no-repeat;
  height: 200px;
}

2. 確保語法正確： 範例程式碼包含漸層聲明的有效 CSS 語法。括號內定義多個顏色停止點，並使用百分比指定漸層的起始和結束位置。
3. 提供容器的高度：為了確保漸變效果可見，必須為包含漸變和背景影像的容器元素設定高度。在提供的程式碼中，「.css」元素的高度為 200 像素。

完成這些調整後，漸層疊加現在將正確顯示在背景影像的頂部，從而實現想要的褪色效果。

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