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

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的特定前缀。

Answer 2

您可以将渐变作为p元素的背景：

  

div p {

     

颜色：白色;

     

背景：线性渐变（到底部，rgba（252,255,244，.5）0％，rgba（179,190,173，.5）100％）;

     

}