如何使用 CSS 漸層在背景圖片上建立漸層淡入效果？

使用CSS 漸變在背景影像中建立逐漸淡入淡出

在背景影像上套用線性漸變時，顯示可能會很困難個元素同時出現。以下步驟將引導您完成整個過程：

錯誤嘗試：

body {
  background: url('background_image.jpg') no-repeat,
    -webkit-gradient(linear, left top, left bottom,
      from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 1)));
}

在此範例中，由於背景影像放置在之前，因此不會顯示漸變它。

正確做法：

要正確顯示漸變和背景圖片，請確保背景圖片放置在CSS 行的末尾，如下所示：

body {
  background: -webkit-gradient(linear, left top, left bottom,
    from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 1))),
    url('background_image.jpg') no-repeat;
}

透過放置影像URL 位於行尾，漸層將覆蓋影像，提供所需的背景底部從黑色到透明的淡入淡出效果。

以上是如何使用 CSS 漸層在背景圖片上建立漸層淡入效果？的詳細內容。更多資訊請關注PHP中文網其他相關文章！