Sass / Compass - แปลง Hex, RGB หรือ Named Color เป็น RGBA

นี่อาจเป็นเข็มทิศ 101 แต่มีใครเขียน mixin ซึ่งกำหนดค่าอัลฟาของสีหรือไม่? ตามหลักการแล้วฉันต้องการให้ mixin ใช้การกำหนดสีในรูปแบบใดก็ได้และใช้ความโปร่งใส:

@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);

ใช้rgbaฟังก์ชันที่มีอยู่ใน Sass

ตั้งค่าความทึบของสี

ตัวอย่าง:

rgba (# 102030, 0.5) => rgba (16, 32, 48, 0.5)
rgba (สีน้ำเงิน, 0.2) => rgba (0, 0, 255, 0.2)

พารามิเตอร์:
(สี) สี
(ตัวเลข) อัลฟา - ตัวเลขระหว่าง 0 ถึง 1

ผลตอบแทน:
(สี)

รหัส:

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

ฉันใช้ปลั๊กอิน rgbapng เข็มทิศ

rgbapng เป็นปลั๊กอิน Compass สำหรับรองรับ RGBA ที่เข้ากันได้กับข้ามเบราว์เซอร์ * ทำงานโดยการสร้าง PNG แบบอัลฟาโปร่งใสพิกเซลเดียวได้ทันทีสำหรับเบราว์เซอร์ที่ไม่รองรับ RGBA ใช้ไลบรารี Ruby ChunkyPNG ที่บริสุทธิ์ส่งผลให้การติดตั้งและการปรับใช้งานที่ไม่ยุ่งยาก

ติดตั้ง

gem install compass-rgbapng

การใช้งาน

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

รวบรวมถึง:

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

ฟังก์ชั่น rgba ไม่ทำงานกับสีโดยไม่มีความโปร่งใสมันจะคืนค่าฐานสิบหกอีกครั้ง ท้ายที่สุดมันไม่ได้หมายถึงการเปลี่ยน hex เป็น rgba เราแค่ทำกำไรจาก hex ไม่อนุญาตให้ใช้ alpha (ยัง)

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

ดังนั้นฉันจึงสร้างฟังก์ชั่นเล็ก ๆ น้อย ๆ ที่สร้างสตริง rgb ตอนนี้ฉันไม่จำเป็นต้องจัดการกับแผ่นใส

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

นอกจากนี้ยังมีเช่น-hex-str () สำหรับรูปแบบ ## AARRGGBB ของ IE:

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

from_hex(hex_string, alpha = nil);

จากเอกสารประกอบ :

สร้างสีใหม่จากสตริงฐานสิบหก CSS ที่ถูกต้อง แฮชชั้นนำเป็นทางเลือก