在具有动态高度的背景图像上创建渐变叠加答案

【问题标题】：Create gradient overlay on background image with dynamic height在具有动态高度的背景图像上创建渐变叠加
【发布时间】：2015-04-16 09:09:39
【问题描述】：

我想在背景图像上创建黑色渐变叠加。但我有一个问题。背景图像总是随机的并且响应良好（宽度：100%；高度：100%；背景尺寸：100%；）。所以我不能把渐变放在固定高度的底部。是否可以使用 css 或 jquery 做到这一点？谢谢！

我的 HTML： http://jsfiddle.net/aobnuox7/

<div style="background:url(http://images.nintendolife.com/reviews/2011/02/panda_craze_dsiware/large.jpg) #000 no-repeat top center; width:100%; height:100%; background-size:100%; position: absolute; top: 0; left:0; z-index:1; "> </div>

http://pbrd.co/1v1cavd - 我需要做的截图

【问题讨论】：

在 Photoshop 中比在 css 中更容易。

标签： javascript jquery html css

【解决方案1】：

如果你想要一个从底部到中间逐渐消失的阴影，为什么不使用box-shadow: inset？您可以在网上找到一些有用的生成器来帮助您入门，然后根据需要对其进行修改。我建议也将 box-shadow 放在 after 伪类中。

【讨论】：