Как сверстать подобный вертикальный градиент с прозрачностью?

Question

[vladHD]

Всем привет ! Собственно попался интересный хедер с таким вот фоном


т.е вверху черная полоска с небольшой прозрачностью, а потом идет тот же черный цвет с прозрачностью 50%. Собственно вопрос как это правильно реализовать ? я пытался сделать в онлайн-генераторах градиентов, но не получается совсем то( не работает прозрачность).
Всем спасибо!
ссылка на большую картинку link

Answer 1

[Денис Инешин]

Дык легко: jsfiddle.net/IonDen/s2s77wLk

<div class="bg">
    <div class="grad"></div>
</div>

.bg {
    position: relative;
    height: 100px;
    background: #f00;
}

.grad {
    position: absolute;
    top: 0; right: 0;
    bottom: 0; left: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
}

Вместо красного фона - любую картинку.

Comments

[vladHD]

В вашем решении не работает прозрачность

[Денис Инешин]

vladHD: с чего это?

[vladHD]

и вообще это немного не то, черная полоска должна бть опр размера( скажем 40 пх)

[vladHD]

не знаю, пробую на вашем же фиддле- не работаем прозрачность

[Денис Инешин]

vladHD: jsfiddle.net/IonDen/s2s77wLk/1 - всё норм

[vladHD]

ну что-то похоже, думаю прокатит jsfiddle.net/s2s77wLk/3

Answer 2

[Денис Букреев]

при чем тут js и jquery?

background: linear-gradient(to top, rgba(0,0,0,0), rgba(0,0,0,1));

r - red
g - green
b - blue
a - alfa (непрозрачность от 1 до 0)

to top - снизу вверх от первого (прозрачного) ко второму (черному) цвету

подробнее тут: htmlbook.ru/css3-na-primerakh/lineinyi-gradient

Comments

[vladHD]

это у Вас просто градиент, а тут именно вверху есть черная полоска( с прозрачностью 0.9), а потом уже с прозрачночностью 0.5.

[Денис Букреев]

vladHD: background: linear-gradient(to top, rgba(0,0,0,0.5), rgba(0,0,0,0.9));
там такой же градиент, какие полоски?

[Денис Букреев]

vladHD: там вообще градиент под углом еще - 45 градусов

[Денис Букреев]

vladHD: а о полосках читаем по ссылке
все расписать здесь - невозможно, в ссылке все есть

[vladHD]

а как задать брейкпоинты эти ?

[Денис Букреев]

vladHD: rgba(0,0,0,1) 20%, rgba(0,0,0,0.8) 80%
проценты после rgba()

по ссылке ведь все написано
загляни уже туда

Answer 3

[Александр Таратин]

www.colorzilla.com/gradient-editor

Comments

[vladHD]

спасибо за ссылку, но в этих генераторах чорт ногу сломит