背景漸變和背景圖同時存在

在開發中遇到一種場景：

  • 需要給一個div設置漸變背景
  • 在漸變背景上面蒙上一層透明的紋理圖片
  • 漸變背景的顏色根據情況變化，但是紋理圖片不變

要達到以上效果就需要背景漸變和背景圖片同時存在。
可做如下設置：

background: url('backgroundImg.png') 100% 100% no-repeat , 
            linear-gradient(90deg, rgba(24, 37, 83, 1) 0%, rgba(73, 71, 110, 1) 100%);

逗號前面設置紋理圖片，后面設置需要的漸變色即可。

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。