首頁 > web前端 > css教學 > 為什麼我的 CSS 漸層疊加層沒有出現在我的背景圖片上?

為什麼我的 CSS 漸層疊加層沒有出現在我的背景圖片上?

Mary-Kate Olsen
發布: 2024-12-04 05:46:10
原創
402 人瀏覽過

Why Doesn't My CSS Gradient Overlay Appear Over My Background Image?

背景影像上的漸變疊加:解決CSS 難題

嘗試將漸變疊加到背景影像中得到優雅的淡出效果以獲得優雅的淡出效果可以得到是一項令人費解的任務。儘管在 CSS 中指定了漸層和圖像,但似乎只顯示一層。

要解決此問題,請修改程式碼結構並確保將背景圖像的 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;
}
登入後複製

此修改可確保背景影像放置在漸層圖層的頂部,從而實現無縫混合。

以上是為什麼我的 CSS 漸層疊加層沒有出現在我的背景圖片上?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板