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

在開發中遇到一種場景:

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

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

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

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

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