RGBA очень весело, и так -webkit-gradient
, -moz-gradient
и э - э ... progid:DXImageTransform.Microsoft.gradient
... да. :)
Есть ли способ объединить два, RGBA и градиенты, так что есть градиент альфа-прозрачности, используя текущие / последние спецификации CSS.
Ответы:
Да. Вы можете использовать rgba в объявлениях градиентов webkit и moz:
( SRC )
( SRC )
По-видимому, вы даже можете сделать это в IE, используя странный синтаксис «расширенный шестнадцатеричный». Первая пара (в примере 55) относится к уровню непрозрачности:
( SRC )
источник
#0001
был бы короткий гекс для «почти прозрачного черного» и#ffcc00ff
был бы таким же, как#ffcc00
«совершенно непрозрачный желтый мандарин»background-image: -o-linear-gradient(top,rgba(255,255,255,0),rgba(210, 230, 250,1));
Новый синтаксис некоторое время поддерживался всеми современными браузерами (начиная с Chrome 26, Opera 12.1, IE 10 и Firefox 16): http://caniuse.com/#feat=css-gradients
Это делает градиент, начиная от сплошного черного вверху, до полностью прозрачного внизу.
Документация по MDN .
источник
Это действительно классная штука! Мне нужно было примерно то же самое, но с горизонтальным градиентом от белого до прозрачного. И это работает просто отлично! Вот мой код:
источник
Вот мой код:
источник
Я нашел это в w3schools и отвечал моим потребностям, пока искал градиент и прозрачность. Я предоставляю ссылку для ссылки на w3schools. Надеюсь, это поможет, если кто-то ищет градиент и прозрачность.
http://www.w3schools.com/css/css3_gradients.asp
Также я попробовал это в w3schools, чтобы изменить непрозрачность, вставляя ссылку для этого, проверьте это
http://www.w3schools.com/css/tryit.asp?filename=trycss3_gradient-linear_trans
Надеюсь, поможет.
источник
Далее я использую для создания вертикального градиента от полностью непрозрачного (вверху) до 20% прозрачности (внизу) для того же цвета:
источник
Я только что наткнулся на этот более свежий пример. Чтобы упростить и использовать самые последние примеры, давая css класс селектора 'grad' (я включил обратную совместимость)
с https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient
источник