Sass / Compass-16 진수, RGB 또는 명명 된 색상을 RGBA로 변환

Sass / Compass-16 진수, RGB 또는 명명 된 색상을 RGBA로 변환

---

이것은 Compass 101 일 수 있지만 색상의 알파 값을 설정하는 믹스 인을 작성한 사람이 있습니까? 이상적으로는 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);

---

Sass에 내장 된 기능 사용rgba

색상의 불투명도를 설정합니다.

예 :

rgba (# 102030, 0.5) => rgba (16, 32, 48, 0.5)
rgba (파란색, 0.2) => rgba (0, 0, 255, 0.2)

매개 변수 :
(Color) color
(Number) alpha — 0과 1 사이의 숫자

반환 :
(색상)

암호:

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

---

rgbapng 나침반 플러그인을 사용합니다.

rgbapng는 브라우저 간 * 호환 RGBA 지원을 제공하기위한 Compass 플러그인입니다. RGBA를 지원하지 않는 브라우저를 위해 즉시 단일 픽셀 알파 투명 PNG를 생성하여 작동합니다. 순수한 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 함수는 투명도가없는 색상에서는 작동하지 않으며 16 진수를 다시 반환합니다. 결국, 그것은 헥스를 rgba로 변환하는 것을 의미하지 않습니다. 우리는 단지 헥스에서 이익을 얻고 있지만 알파를 허용하지 않습니다.

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

그래서 rgb 문자열을 구성하는 작은 함수를 만들었습니다. 지금은 투명 필름을 다룰 필요가 없습니다.

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

---

IE의 ## AARRGGBB 형식에 대한 ie-hex-str ()도 있습니다.

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 16 진수 문자열에서 새 색상을 만듭니다. 선행 해시는 선택 사항입니다.

참고 URL : https://stackoverflow.com/questions/9270844/sass-compass-convert-hex-rgb-or-named-color-to-rgba