CSS3 Saydamlık + Degrade


286

RGBA son derece eğlenceli ve böyledir -webkit-gradient, -moz-gradientve ah ... progid:DXImageTransform.Microsoft.gradient... evet. :)

Mevcut / en son CSS özelliklerini kullanarak alfa saydamlığı gradyanı olacak şekilde iki, RGBA ve degradeleri birleştirmenin bir yolu var mı?


1
@ geo1701'in yorumu, modern standartlarla daha ilgili olduğu için kabul edilen yorum olmalıdır.
Dmytro Shevchenko

Yanıtlar:


326

Evet. Rgba'yı hem webkit hem de moz gradyan bildirimlerinde kullanabilirsiniz:

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

Görünüşe göre bunu tek bir "genişletilmiş hex" sözdizimi kullanarak IE'de bile yapabilirsiniz. İlk çift (örnek 55'te) opaklık seviyesini ifade eder:

/* 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
FYI, "genişletilmiş onaltılık", 24 bit RGB renk değerleri yerine yalnızca 32 bit ARGB'dir.
Macke

2
Bunların standart css'de de çalışmasını istiyorum, ancak sonunda alfa ile (daha doğal görünüyor): #0001“neredeyse şeffaf siyah” için kısa altıgen #ffcc00ffolur ve #ffcc00yani “tamamen opak mandalina sarısı” ile aynı olur
uçan koyun

56
İstediğiniz degradeyi elde etmek için bir dizi güzel önayar ve tüm çapraz tarayıcı uyumlu varyasyonlara sahip Colorzilla'daki CSS3 Gradient Generator'a da göz atın
andrhamm

yani, ben kontrol ettim, tüm büyük tarayıcılarda çalışır ama opera, herhangi bir ipucu çalışmıyor?
WhoSayIn

nevermind, ben sadece buldum;)background-image: -o-linear-gradient(top,rgba(255,255,255,0),rgba(210, 230, 250,1));
WhoSayIn

101

Yeni sözdizimi bir süredir tüm modern tarayıcılar tarafından desteklenmektedir (Chrome 26, Opera 12.1, IE 10 ve Firefox 16'dan başlayarak): http://caniuse.com/#feat=css-gradients

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

Bu, üstte düz siyahtan başlayarak altta tamamen şeffaf olana kadar bir degrade oluşturur.

MDN belgeleri .


7
.. altta tamamen şeffaf olmak için üstte düz siyah oluşturur
commonpike

Bunun bir öneri olduğunu ve aslında çalışmadığını varsayıyorum?
bart

15

Bu gerçekten harika şeyler! Hemen hemen aynı ihtiyacım vardı, ama beyazdan şeffaflığa doğru yatay gradyanla. Ve gayet iyi çalışıyor! İşte benim kod:

.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
başvuru için, Microsoft uygulamasında gradientType = 1 yatay, 0 dikeydir.
Brooks

IE7 ve IE8 degradeleri herhangi bir alfa rengi belirtmiyor mu? Şeffaflığa gerçekten kayboluyorlar mı?
KajMagnus

3

İşte benim kod:

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

Ben w3schools buldum ve degrade ve şeffaflık ararken benim ihtiyaçlarına uygun. W3schools için bağlantı sağlıyorum. Umarım herhangi biri degrade ve şeffaflık ararsa yardımcı olur.

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

Ayrıca w3schools bunu kontrol için bağlantı yapıştırarak opaklığı değiştirmek için denedim

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

Umarım yardımcı olur.


1

Aşağıdakiler, aynı renk için tamamen opaktan (üst)% 20'ye kadar şeffaflıkta (alt) dikey bir degrade oluşturmak için kullandığım yöntem :

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

Daha yeni bir örnekle daha yeni karşılaştım. Basitleştirmek ve en son örnekleri kullanmak için, css 'grad' seçici sınıfı vererek, (geriye dönük uyumluluk dahil ettik)

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

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

Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.