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

Question

RGBA очень забавна, и так -webkit-gradient, -moz-gradient, и uh ... progid:DXImageTransform.Microsoft.gradient ... да. :)

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

Answer 1

Да. Вы можете использовать RGBA как в WebKit и Мос деклараций градиентных:

/* 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, используя нечетным «продлен hex ". Первая пара (в примере 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)

Answer 2

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

.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 
     ); 
    } 

Answer 3

Новый синтаксис был поддержан на некоторое время со всеми современными браузерами (начиная с 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)); 

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

Documentation on MDN.

Answer 4

Вот мой код:

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 */ 

Answer 5

Я использую http://enjoycss.com для создания какого-либо простых и сложных градиентов thty имеет много градиентных модели в галерее, а

Answer 6

#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*/ 
} 

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

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

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

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

Надеется, что это помогает.

Answer 7

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

.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