设置linear-gradient后，带背景图的div背景消失问题求助

你代码里有两个关键错误，导致背景失效：

1. linear-gradient 语法完全错误 #

• 方向写法不对：不能用 from left，正确写法是 to right（表示渐变从左向右过渡），也可以用角度值比如 90deg
• 颜色值无效：1 和 0 不是合法的颜色值，你需要用带透明度的颜色来实现渐变效果，比如从完全不透明的黑色到完全透明，写法是 rgba(0,0,0,1) 到 rgba(0,0,0,0)

2. 多背景层的分隔错误 #

当同时设置背景图片和渐变作为多背景时，两个背景必须用逗号分隔，你现在直接把它们连在一起，浏览器无法识别整个属性，导致背景完全失效。

修正后的代码 #

把 .facebook 类的 CSS 改成下面这样：

.facebook{
    /* 渐变在前（覆盖在背景图上），背景图在后，用逗号分隔 */
    background-image: linear-gradient(to right, rgba(0,0,0,1), rgba(0,0,0,0)), url(/img/facebook.jpg);
}

如果想让背景图显示在渐变上面，只需要把顺序调换：

.facebook{
    background-image: url(/img/facebook.jpg), linear-gradient(to right, rgba(0,0,0,1), rgba(0,0,0,0));
}

另外，.menu2style 里的 background-repeat: no-repeat 和 background-size: cover 会作用于所有背景层，如果你需要给不同背景单独设置这些属性，可以用逗号分隔对应的值，比如：

background-repeat: no-repeat, no-repeat;
background-size: cover, cover;

内容的提问来源于stack exchange，提问作者Luca Benedini