CSS3 Прозрачность + Градиент


286

RGBA очень весело, и так -webkit-gradient, -moz-gradientи э - э ... progid:DXImageTransform.Microsoft.gradient... да. :)

Есть ли способ объединить два, RGBA и градиенты, так что есть градиент альфа-прозрачности, используя текущие / последние спецификации CSS.


1
Комментарий @ geo1701 должен стать принятым, так как он более соответствует современным стандартам.
Дмитрий Шевченко

Ответы:


326

Да. Вы можете использовать rgba в объявлениях градиентов webkit и moz:

/* webkit example */
background-image: -webkit-gradient(
  linear, left top, left bottom, from(rgba(50,50,50,0.8)),
  to(rgba(80,80,80,0.2)), color-stop(.5,#333333)
);

( SRC )

/* mozilla example - FF3.6+ */
background-image: -moz-linear-gradient(
  rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 95%
);

( SRC )

По-видимому, вы даже можете сделать это в IE, используя странный синтаксис «расширенный шестнадцатеричный». Первая пара (в примере 55) относится к уровню непрозрачности:

/* approximately a 33% opacity on blue */
filter: progid:DXImageTransform.Microsoft.gradient(
  startColorstr=#550000FF, endColorstr=#550000FF
);

/* IE8 uses -ms-filter for whatever reason... */
-ms-filter: progid:DXImageTransform.Microsoft.gradient(
  startColorstr=#550000FF, endColorstr=#550000FF
);

( SRC )


20
К вашему сведению, «расширенный шестнадцатеричный код» - это просто 32-битный ARGB вместо 24-битных значений цвета RGB.
Мак

2
я бы хотел, чтобы они работали и в стандартном CSS, но с альфа в конце (кажется более естественным): это #0001был бы короткий гекс для «почти прозрачного черного» и #ffcc00ffбыл бы таким же, как #ffcc00«совершенно непрозрачный желтый мандарин»
летающая овца

56
Также ознакомьтесь с CSS3 Gradient Generator в Colorzilla, который имеет множество хороших пресетов и все кросс-браузерные совместимые варианты для достижения желаемого градиента
andrhamm

Итак, я проверил, работает на всех основных браузерах, но он не работает на опере, какая-либо подсказка?
WhoSayIn

не важно, я только что нашел это;)background-image: -o-linear-gradient(top,rgba(255,255,255,0),rgba(210, 230, 250,1));
WhoSayIn

101

Новый синтаксис некоторое время поддерживался всеми современными браузерами (начиная с Chrome 26, Opera 12.1, IE 10 и Firefox 16): http://caniuse.com/#feat=css-gradients

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

Это делает градиент, начиная от сплошного черного вверху, до полностью прозрачного внизу.

Документация по MDN .


7
.. создает сплошной черный вверху и полностью прозрачный внизу
commonpike

Я предполагаю, что это предложение и на самом деле не работает?
Барт

15

Это действительно классная штука! Мне нужно было примерно то же самое, но с горизонтальным градиентом от белого до прозрачного. И это работает просто отлично! Вот мой код:

.gradient{
        /* webkit example */
        background-image: -webkit-gradient(
          linear, right top, left top, from(rgba(255, 255, 255, 1.0)),
          to(rgba(255, 255, 255, 0))
        );

        /* mozilla example - FF3.6+ */
        background-image: -moz-linear-gradient(
          right center,
          rgba(255, 255, 255, 1.0) 20%, rgba(255, 255, 255, 0) 95%
        );

        /* IE 5.5 - 7 */
        filter: progid:DXImageTransform.Microsoft.gradient(
          gradientType=1, startColor=0, endColorStr=#FFFFFF
        );

        /* IE8 uses -ms-filter for whatever reason... */
        -ms-filter: progid:DXImageTransform.Microsoft.gradient(
          gradientType=1, startColor=0, endColoStr=#FFFFFF
        );
    }

1
для справки, в реализации Microsoft, GradientType = 1 является горизонтальным, 0 является вертикальным.
Брукс

Градиенты IE7 и IE8 не определяют альфа-цвет? Они действительно превращаются в прозрачные?
КайМагнус

3

Вот мой код:

background: #e8e3e3; /* Old browsers */
  background: -moz-linear-gradient(top,  rgba(232, 227, 227, 0.95) 0%, rgba(246, 242, 242, 0.95) 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(232, 227, 227, 0.95)), color-stop(100%,rgba(246, 242, 242, 0.95))); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  rgba(232, 227, 227, 0.95) 0%,rgba(246, 242, 242, 0.95) 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  rgba(232, 227, 227, 0.95) 0%,rgba(246, 242, 242, 0.95) 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  rgba(232, 227, 227, 0.95) 0%,rgba(246, 242, 242, 0.95) 100%); /* IE10+ */
  background: linear-gradient(to bottom,  rgba(232, 227, 227, 0.95) 0%,rgba(246, 242, 242, 0.95) 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='rgba(232, 227, 227, 0.95)', endColorstr='rgba(246, 242, 242, 0.95)',GradientType=0 ); /* IE6-9 */

3
#grad
{
    background: -webkit-linear-gradient(left,rgba(255,0,0,0),rgba(255,0,0,1)); /*Safari 5.1-6*/
    background: -o-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); /*Opera 11.1-12*/
    background: -moz-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); /*Fx 3.6-15*/
    background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); /*Standard*/
}

Я нашел это в w3schools и отвечал моим потребностям, пока искал градиент и прозрачность. Я предоставляю ссылку для ссылки на w3schools. Надеюсь, это поможет, если кто-то ищет градиент и прозрачность.

http://www.w3schools.com/css/css3_gradients.asp

Также я попробовал это в w3schools, чтобы изменить непрозрачность, вставляя ссылку для этого, проверьте это

http://www.w3schools.com/css/tryit.asp?filename=trycss3_gradient-linear_trans

Надеюсь, поможет.


1

Далее я использую для создания вертикального градиента от полностью непрозрачного (вверху) до 20% прозрачности (внизу) для того же цвета:

background: linear-gradient(to bottom, rgba(0, 64, 122, 1) 0%,rgba(0, 64, 122, 0.8) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
background: -o-linear-gradient(top, rgba(0, 64, 122, 1) 0%, rgba(0, 64, 122, 0.8) 100%); /* Opera 11.10+ */
background: -moz-linear-gradient(top, rgba(0, 64, 122, 1) 0%, rgba(0, 64, 122, 0.8) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(0, 64, 122, 1) 0%,rgba(0, 64, 122, 0.8) 100%); /* Chrome10-25,Safari5.1-6 */
background: -ms-linear-gradient(top, rgba(0, 64, 122, 1) 0%,rgba(0, 64, 122, 0.8) 100%); /* IE10+ */
-ms-filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00407a', endColorstr='#cc00407a',GradientType=0 ); /* IE8 */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00407a', endColorstr='#cc00407a',GradientType=0 ); /* IE 5.5 - 9 */

0

Я только что наткнулся на этот более свежий пример. Чтобы упростить и использовать самые последние примеры, давая css класс селектора 'grad' (я включил обратную совместимость)

.grad {
    background-color: #F07575; /* fallback color if gradients are not supported */
    background-image: -webkit-linear-gradient(top left, red, rgba(255,0,0,0));/* For Chrome 25 and Safari 6, iOS 6.1, Android 4.3 */
    background-image: -moz-linear-gradient(top left, red, rgba(255,0,0,0));/* For Firefox (3.6 to 15) */
    background-image: -o-linear-gradient(top left, red, rgba(255,0,0,0));/* For old Opera (11.1 to 12.0) */
    background-image: linear-gradient(to bottom right, red, rgba(255,0,0,0)); /* Standard syntax; must be last */
}

с https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.