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

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

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

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

Кроссбраузерная совместимость не важна; Мне просто нужно, чтобы он работал в Google Chrome.

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

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


javascript google-chrome gradient css opacity
person 木川 炎星    schedule 19.12.2010    source источник

Ответы (3)


arrow_upward
22
arrow_downward

да

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

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

e.g.

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

Изменить: для окончательного значения (непрозрачности) 1 непрозрачно, а 0 - прозрачно.

person Jasper    schedule 19.12.2010
comment
Вы, вероятно, имели в виду (255, 255, 255, 1) для первого значения. - person Arseni Mourzenko; 19.12.2010
comment
код на самом деле не работает, похоже, отсутствуют запятые и скобки - person Toby Hede; 06.12.2011

arrow_upward
16
arrow_downward

Ага, 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 */
);
person antonj    schedule 19.12.2010
comment
Спасибо за прекрасную скрипку! - person KajMagnus; 05.11.2011
comment
Создайте градиент svg и закодируйте его в base64 background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyPC9saW5l...3N2Zz4g'); - person antonj; 12.06.2014

arrow_upward
2
arrow_downward

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

-webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,1)), to(rgba(0,0,0,0)));
person oezi    schedule 19.12.2010
comment
Возможно, я что-то неправильно понял, но почему вы ожидаете, что свойство с префиксом поставщика -webkit будет работать в Firefox? (-webkit относится к Chrome и Safari, а также к одному или двум другим; -moz - к Firefox; -o - к Opera; -ms - к IE ...) - person David says reinstate Monica; 19.12.2010
comment
спасибо за подсказку, я отредактировал это ... я просто забыл написать какой-то текст (вот что произойдет, если вы пьете алкоголь во время суффинга на stackoverflow в воскресенье вечером -.- ') - person oezi; 19.12.2010