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

标签 html css gradient

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

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

有没有办法:

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

和渐变一起?

最佳答案

谢谢 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);

关于html - 在背景封面图像上应用渐变,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24376699/

相关文章:

html - 为什么我的 HTML 表格会延伸到底部和右侧?

javascript - D3如何更新文字?

html - 是否存在类似 <a href ="fax:number">number</a> 的内容?

css - 为什么我的 CSS 样式不适用于页面?

Python Numpy 逻辑回归

opencv - 定向梯度直方图中的最终向量

ios - CGGradient 在 iPad 1 和 2 上显示不正确

html - <marquee> 是 block 元素还是行内元素?

javascript - 如何在第二次单击时反转 javascript 中的函数?

jquery - 在右侧滚动圆圈条?