在動態高度的背景圖像上創建漸變疊加

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偽類中。