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

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

27 голосов
/ 19 декабря 2010

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

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

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

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

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

Ответы [ 3 ]

17 голосов
/ 19 декабря 2010

Да

для цветов используйте 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 прозрачный

16 голосов
/ 19 декабря 2010

Да, 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 */
);
2 голосов
/ 19 декабря 2010

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

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