背景渐变和背景图同时存在

在开发中遇到一种场景：

  • 需要给一个div设置渐变背景
  • 在渐变背景上面蒙上一层透明的纹理图片
  • 渐变背景的颜色根据情况变化，但是纹理图片不变

要达到以上效果就需要背景渐变和背景图片同时存在。
可做如下设置：

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

逗号前面设置纹理图片，后面设置需要的渐变色即可。

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。