Эффект Gradient alpha исчезает с помощью CSS 3

Ответ 1

Да, вы можете! Используя преимущества цветов RGBa и градиентов CSS3, мы можем применять следующие стили к элементу и иметь затухающий полупрозрачный фон:

Mozilla:

background: -moz-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255, 1));

Webkit:

background: -webkit-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255, 1));

(Обновлено после изменения градиентов Webkit)

К сожалению, это работает только в Firefox 3.6+, Safari и Chrome. Если вам нужен эффект в IE или более старых версиях Firefox, тогда вам будет лучше использовать полупрозрачный PNG, как это делает Twitter.

Ответ 2

Хотя это не универсальное решение, оно работает на Safari/Webkit, поэтому приятно знать кого-то, кто занимается мобильными приложениями.

Итак, предположим, что вы только обращаетесь к webkit, у вас есть эта приятная функция, описанная здесь.

-webkit-mask-image: -webkit-gradient(...)

Это также помогает вам, когда вы не можете подделать затухание с помощью некоторого наложенного элемента. (например, с изображением на фоне вместо сплошного цвета)

В остальном перейдите к приведенному выше.

Ответ 3

Если вы хотите использовать более современный синтаксис направления для градиента, используйте to bottom, как в

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