html - 如何将渐变放在背景图像之上但在文本之下

Question

我有一些 <div>s带有背景图像和白色文本。我想在图像顶部放置一个深色渐变，以便白色文本可读。我必须在 CSS 中执行此操作。我怎样才能做到这一点？

<div><p>Here is some text</p><div>

div p {
    color: white;
}
div {
     background-image: url("images.png")
}

Answer 1

改变这个....

div {
     background-image: url("images.png")
}

对于这个...

div {
     background-image: linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.2)), url("images.png")
}

查看 google 上的示例，因为相当多的浏览器仍然需要 linear-gradient 的特定前缀，因为浏览器规范和含义各不相同。