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

Question

我想在背景图片上创建黑色渐变叠加。但我有一个问题。背景图像总是随机且响应准备好（宽度：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 - 我需要做的截图

Answer 1

如果你想要一个从底部到中间渐弱的阴影，为什么不使用box-shadow: inset？您可以在线找到一些有用的生成器，让自己开始，然后根据需要进行修改。我建议将box-shadow放在after伪类中。