html - 在背景封面图像上应用渐变

Question

我有以下 fiddle with background image我将其用作封面(试图在不扭曲图像的情况下找到最合适的)。

现在我想在这张图片上添加渐变，我也看到类似的问题 this我无法让它工作(渐变 does not show up)。

有没有办法:

background-size: cover;
background-position: center;
background-image: url(pathToImg);

和渐变一起？

Answer 1

谢谢 KingKing 和 Chris Hardie。感谢您的评论，我明白了我做错了什么以及如何解决它。

所以第一个问题是我的 url-image 在我的渐变之上，因此隐藏了它(感谢 kingKing)。第二个问题是我需要渐变是透明的(感谢 Chris)。

所以这是一个 solution .

如果有人能给我更好的答案，我会很乐意接受。

background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,1)), url(imga.jpg);