Каким образом можно сделать линенйную прозрачность блока?

Question

[Амир Гафуров]

Есть div с разным содержимым, каким образом можно сделать линейную градиентную прозрачность (т. е. верхняя часть блока полностью прозрачная, нижняя - полностью непрозрачная)?

Answer 1

[Сергей Протько]

css-mask

Либо, если бэкграунд позволяет, просто наложить полупрозранчый оверлей на блок.

Comments

[Амир Гафуров]

вот это уже более похоже на решение задачи!)

[Сергей Протько]

@amir73911 вот только с поддрежкой этой фичи в браузерах все плохо

Answer 2

[Юрий Лобанов]

linear-gradient и rgba цвет
jsfiddle.net/iiil/Xy2wE/1

Comments

[Юрий Лобанов]

htmlbook.ru/css3-na-primerakh/lineinyi-gradient

[Амир Гафуров]

нет, вы не поняли меня, прозрачность именно всего блока с содержимым, а не только его фона.

Answer 3

[Юрий Лобанов]

Наверное так имели в виду
jsfiddle.net/iiil/Xy2wE/2

Comments

[Юрий Лобанов]

и не забудьте сделать градиент кроссбраузерным.
https://www.google.ru/search?q=%D0%BA%D1%80%D0%BE%...

[Амир Гафуров]

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

[Юрий Лобанов]

@amir73911 да, я уже понял из картинки. Тут линейным градиентом не решить, так как у Вас фон не однородный под блоком.

[Амир Гафуров]

поэтому и обратился за помощью сюда:)

Answer 4

[Руслан Касымов]

Как вариант поверх блока положить абсолютно позиционированный блок с linear-gradient
Вот решение:
jsfiddle.net/wmhRd

Comments

[Амир Гафуров]

нет, не тот принцип:) нужно, чтобы сам текст был прозрачным, ну и желтый фон