Html 线性梯度对背景图像的干扰

我想对背景图像应用线性渐变，但当我应用渐变时，网页会变成白色。这真的很奇怪，因为梯度应该是黑色的

我曾尝试使用一个外部div，只使用它来应用线性渐变，但即使这样也不起作用。我觉得它只是应用在图像前面，即使我用rgba函数添加了透明度。请提前帮助和感谢

jsfiddle~

*{
保证金：0；
填充：0；
框大小：边框框；
}
a{
文字装饰：无；
颜色：白色；
/*溢出：隐藏*/
}
.英雄{
位置：相对位置；
溢出：隐藏；
最小高度：100%；
}
英雄：以前{
背景图片：-webkit线性渐变（rgba（黑色，.5），rgba（黑色，.5）），url（“/img/header.jpg”）；
背景重复：无重复；
背景位置：中上；
背景尺寸：封面；
内容：''；
身高：100%；
位置：固定；
左：0；
排名：0；
宽度：100%；
改变：转变；
z指数：-1；
}
身体{
字体系列：“菲拉无”，无衬线；
字号：2rem；
颜色：白色；
}

浮世绘寿司ツ






厨师特制寿司拼盘


你好

顾名思义，它由4个参数组成——红色、绿色、蓝色和Alpha（不透明度）。在线性渐变中，RGBA颜色应为

RGBA（0,0,0,5）

*{
保证金：0；
填充：0；
框大小：边框框；
}
a{
文字装饰：无；
颜色：白色；
/*溢出：隐藏*/
}
.英雄{
位置：相对位置；
溢出：隐藏；
最小高度：100%；
}
英雄：以前{
背景：线性渐变（rgba（0,0,0,5），rgba（0,0,0,5）），url（“https://picsum.photos/200/300");
背景重复：无重复；
背景位置：中上；
背景尺寸：封面；
内容：''；
身高：100%；
位置：固定；
左：0；
排名：0；
宽度：100%；
改变：转变；
z指数：-1；
}
身体{
字体系列：“菲拉无”，无衬线；
字号：2rem；
颜色：白色；
}

厨师特制寿司拼盘


你好

您使用css属性

-webkit linear gradient

的方式不正确，请参阅以了解渐变样式

为了在图像顶部添加渐变色，您需要使用多个html元素，例如

div

您需要设置这些元素的样式，最好使用带有透明度的渐变或颜色，例如

rgba

---

希望这有帮助

虽然确实不能使用OP语法使用渐变，但实际上可以在css中从上到下分层背景图像。例子：