为背景添加线性渐变后背景图消失，使用background-image属性则正常，求助

问题出在background属性的语法上：你把背景图URL写进了linear-gradient的参数列表里，导致浏览器无法正确识别背景图，只能渲染渐变。

正确的写法是把渐变和背景图作为两个独立的背景层，用逗号分隔：

background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.9)), url(bg.jpg);
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
height: 100vh;

关键说明 #

• 多个背景层用逗号分隔，渐变层在前，背景图层在后，这样渐变会叠加在背景图上方，实现半透明遮罩效果
• 若要调整层级，将需要显示在最上层的背景放在参数最前面
• 也可以拆分写成background-image属性，效果完全一致：

background-image: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.9)), url(bg.jpg);
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
height: 100vh;

内容的提问来源于stack exchange，提问作者Ayush Singh