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

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 放在伪类之后。