Sass / Compass - Konversi Hex, RGB, atau Named Color ke RGBA

86

Ini mungkin Kompas 101, tetapi apakah ada yang menulis mixin yang menetapkan nilai alfa suatu warna? Idealnya, saya ingin mixin mengambil bentuk definisi warna apa pun, dan menerapkan transparansi:

@include set-alpha( red, 0.5 );          //prints rgba(255, 0, 0, 0.5);
@include set-alpha( #ff0000, 0.5 );      //prints rgba(255, 0, 0, 0.5);
@include set-alpha( rgb(255,0,0), 0.5 ); //prints rgba(255, 0, 0, 0.5);

— Pat Newell
sumber

180

Gunakan rgbafungsi bawaan Sass

Menetapkan opasitas warna.

Contoh:

rgba (# 102030, 0.5) => rgba (16, 32, 48, 0.5)
rgba (biru, 0.2) => rgba (0, 0, 255, 0.2)

Parameter:
(Color) color
(Number) alpha - Angka antara 0 dan 1

Pengembalian:
(Warna)

Kode:

rgba(#ff0000, 0.5); // Output is rgba(255,0,0,0.5);

— maxbeatty
sumber

4

tidak percaya saya tidak hanya mencoba itu. Terima kasih banyak maks

— Pat Newell

@jon dapatkah Anda menjelaskan apa yang membingungkan tentang jawaban saya sehingga saya dapat memperbaikinya?

— maxbeatty

@maxbeatty saya tidak yakin apa yang terjadi dengan komentar saya tetapi saya bingung dengan "==>" ... tampaknya jelas di belakang, tetapi ketika Anda merasa tersesat sangat sulit untuk mengatakan kode yang diperlukan dari komentar. Saya kira itu bisa dibuat lebih jelas dengan hanya memasukkan kode yang dapat digunakan aktual di blok kode.

— jon

@jon the blockquote langsung dari dokumentasi Sass. Alih-alih hanya menautkan ke fungsi bawaan yang relevan. Saya pikir akan sangat membantu untuk memasukkan dokumentasi terkait dalam jawaban. Maaf ini membingungkan.

— maxbeatty

oh DUH. Arg. Selalu lihat DI DALAM KOTAK sebelum Anda mencoba untuk berpikir di luarnya. Astaga!

— dudewad

8

Saya menggunakan plugin kompas rgbapng

rgbapng adalah plugin Kompas untuk menyediakan dukungan RGBA yang kompatibel dengan lintas browser *. Ia bekerja dengan membuat PNG transparan alfa piksel tunggal dengan cepat untuk browser yang tidak mendukung RGBA. Ia menggunakan pustaka Ruby ChunkyPNG murni yang menghasilkan instalasi dan penyebaran yang tidak merepotkan.

Install

gem install compass-rgbapng

Pemakaian

@include rgba-background(rgba(0,0,0,0.75));

Dikompilasi ke:

background: url('/images/rgbapng/000000bf.png?1282127952');
background: rgba(0, 0, 0, 0.75);

— Ilia Choly
sumber

whoa ... mengagumkan. Saya terpesona oleh kekuatan kompas. terima kasih atas tanggapannya

— Pat Newell

7

Fungsi rgba tidak berfungsi pada warna tanpa transparansi, ia mengembalikan hex lagi. Lagipula, itu tidak dimaksudkan untuk mengubah hex menjadi rgba, kami hanya menghasilkan keuntungan dari hex tidak mengizinkan alpha (belum).

rgba(#fff, 1) // returns #fff

Jadi, saya membuat beberapa fungsi kecil yang membangun string rgb. Saya tidak perlu berurusan dengan transparansi untuk saat ini.

@function toRGB ($color) {
    @return "rgb(" + red($color) + ", " + green($color) + ", " + blue($color)+ ")";
}

— Carlos Martínez
sumber

2

Ada juga ie-hex-str () untuk format IE ## AARRGGBB:

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str(#fdfdfd)}', endColorstr='#{ie-hex-str(#f6f6f6)}',GradientType=0); /* IE6-9 */

— mikespainhower
sumber

2

from_hex(hex_string, alpha = nil);

Dari dokumentasi :

Buat warna baru dari string hex CSS yang valid. Hash terkemuka adalah opsional.

— pengguna776411
sumber