Создать наложение градиента на фоновое изображение с динамической высотой

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? Вы можете найти некоторые полезные генераторы онлайн, чтобы начать работу, а затем изменить их, как вам нужно. Я бы предложил помещать коробку тени в псевдокласс.