背景影像上的漸變疊加:解決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中文網其他相關文章!