Можете ли вы создать градиенты, которые исчезают до непрозрачности с помощью CSS или JavaScript?

WebKit внедрил возможность создания градиентов CSS. Например, со следующим кодом:

-webkit-gradient(linear, left top, left bottom, from(#fff), to(#000));

Однако возможно ли использовать градиент непрозрачности с помощью CSS? Я хочу, чтобы градиент был одним цветом с одной стороны и уменьшал прозрачность с другой.

Совместимость между браузерами не важна; Мне просто нужно работать в Google Chrome.

Есть ли способ сделать это с помощью CSS? Если нет, можно ли что-то подобное сделать с помощью JavaScript (а не jQuery)?

Спасибо за вашу помощь.

Ответ 1

Да

для цветов используйте rgba (x, y, z, o), где o - непрозрачность

должен работать

например.

background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 1)), to(rgba(0, 0, 0, 0)));

Edit: Для окончательного значения (непрозрачность) 1 непрозрачно и 0 прозрачно

Ответ 2

Yup, rgba(red, green, blue, alpha) - это то, что вы должны использовать http://www.w3.org/TR/css3-color/#rgba-color, пример (попробуйте на jsFiddle):

/* Webkit */
background: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(1, rgba(0,0,0,0.0)), /* Top */
    color-stop(0, rgba(0,0,0,1.0)) /* Bottom */
);

/* Gecko */
background: -moz-linear-gradient(
    center bottom,
    rgba(0,0,0,1.0) 0%, /* Bottom */
    rgba(0,0,0,0.0) 100% /* Top */
);

Ответ 3

не тестировался, но это должно работать (в FF это работает (с другим синтаксисом) - я не уверен, что safari/webkit знает rgba):

-webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,1)), to(rgba(0,0,0,0)));