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

Question

[retrica]

Как сделать градиент, что бы прозраность БЛОКА сверху была 100% и постепенно перешла к 0% внизу блока?

Answer 1

[Евгений Петров]

Используем rgba() и linear-gradient().

background: linear-gradient(rgba(51, 102, 153, 0), rgba(51, 102, 153, 1));

В IE9 и ниже не будет работать linear-gradient, а в IE8 и ниже rgba. Для них есть решение в виде filter:gradient с ограничением — направление градиента может быть либо вертикальным, либо горизонтальным.

filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#00336699, endColorStr=#ff336699,GradientType=0);

Пример

Примечание: В CSS мы оперируем понятием «непрозрачность». Именно так переводится opacity.