Transparansi CSS3 + Gradien

286

RGBA sangat menyenangkan, dan begitu juga -webkit-gradient, -moz-gradient, dan uh ... progid:DXImageTransform.Microsoft.gradient... yeah. :)

Apakah ada cara untuk menggabungkan keduanya, RGBA dan gradien, sehingga ada gradien transparansi alpha menggunakan spesifikasi CSS terkini / terbaru.

css  gradient 
— Jourkey
sumber
1
Komentar @ geo1701 harus menjadi yang diterima, karena lebih relevan dengan standar modern.
— Dmytro Shevchenko

Jawaban:

326

Iya. Anda dapat menggunakan rgba di deklarasi gradien webkit dan 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 )

Tampaknya Anda bahkan dapat melakukan ini di IE, menggunakan sintaks "extended hex" yang aneh. Pasangan pertama (dalam contoh 55) mengacu pada tingkat opacity:

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

— Owen
sumber
20
FYI, "extended hex" hanya ARGB 32-bit, bukan nilai warna RGB 24-bit.
— Macke
2
Saya ingin ini bekerja di css standar, juga, tetapi dengan alfa pada akhirnya (tampaknya lebih alami): #0001akan menjadi hex pendek untuk "hampir transparan hitam" dan #ffcc00ffakan sama dengan #ffcc00, yaitu "kuning keprok benar-benar buram"
— domba terbang
56
juga periksa Gradient Generator CSS3 di Colorzilla yang memiliki banyak preset yang bagus dan semua variasi lintas browser yang kompatibel untuk mencapai gradien yang Anda inginkan
— andrhamm
jadi, saya sudah memeriksanya, bekerja di semua browser utama tetapi tidak bekerja pada opera, ada petunjuk?
— WhoSayIn
nevermind, saya baru saja menemukannya;)background-image: -o-linear-gradient(top,rgba(255,255,255,0),rgba(210, 230, 250,1));
— WhoSayIn
101

Sintaks baru telah didukung untuk sementara waktu oleh semua browser modern (mulai dari Chrome 26, Opera 12.1, IE 10 dan Firefox 16): http://caniuse.com/#feat=css-gradients

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

Ini menghasilkan gradien, mulai dari hitam pekat di bagian atas, hingga sepenuhnya transparan di bagian bawah.

Dokumentasi tentang MDN .

— George Filippakos
sumber
7
.. menciptakan hitam pekat di bagian atas hingga sepenuhnya transparan di bagian bawah
— commonpike
Saya menganggap ini saran dan tidak benar-benar berfungsi?
— Bart
15

Ini beberapa hal yang sangat keren! Saya membutuhkan hampir sama, tetapi dengan gradien horizontal dari putih ke transparan. Dan itu bekerja dengan baik! Inilah kode saya:

.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
        );
    }
— Misha
sumber
1
untuk referensi, pada implementasi Microsoft, gradientType = 1 adalah horisontal, 0 adalah vertikal.
— Brooks
Gradien IE7 dan IE8 tidak menentukan warna alfa apa pun? Apakah mereka benar-benar pudar menjadi transparan?
— KajMagnus
3

Ini kode saya:

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 */
— Miloš Miljković
sumber
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*/
}

Saya menemukan ini di w3schools dan sesuai dengan kebutuhan saya ketika saya mencari gradien dan transparansi. Saya menyediakan tautan untuk merujuk ke w3schools. Semoga ini bisa membantu jika ada yang mencari gradien dan transparansi.

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

Saya juga mencobanya di w3schools untuk mengubah opacity paste tautan untuk memeriksanya

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

Semoga ini bisa membantu.

— sagar buddhi
sumber
1

Berikut ini adalah yang saya gunakan untuk menghasilkan gradien vertikal dari benar-benar buram (atas) hingga 20% dalam transparansi (bawah) untuk warna yang sama:

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 */
— Riccardo Volpe
sumber
0

Saya baru saja menemukan contoh yang lebih baru ini. Untuk menyederhanakan dan menggunakan contoh-contoh terbaru, memberikan css kelas pemilih 'grad', (Saya telah memasukkan kompatibilitas ke belakang)

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

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

— davidrynn
sumber
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.