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

86

이것은 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);

— 팻 뉴웰
소스

180

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

— Maxbeatty
소스

4

내가 그것을 시도하지 않았다는 것을 믿을 수 없습니다. 최대 감사합니다

— Pat Newell 2012

@jon 내 답변에 대해 혼란 스러웠던 점을 자세히 설명하여 개선 할 수 있습니까?

— maxbeatty

@maxbeatty 내 댓글에 무슨 일이 있었는지 잘 모르겠지만 "==>"로 인해 혼란 스러웠습니다 ... 돌아 보면 분명해 보이지만 잃어버린 느낌이 들면 댓글에서 필요한 코드를 말하기가 정말 어렵습니다. 코드 블록에 실제 사용 가능한 코드 만 포함하면 더 명확해질 수 있다고 생각합니다.

— jon

@jon 블록 인용구는 Sass 문서에서 직접 가져온 것입니다. 관련 내장 함수에 연결하는 대신. 답변에 관련 문서를 포함하는 것이 도움이 될 것이라고 생각했습니다. 혼란스러워서 죄송합니다.

— maxbeatty

오 이런. Arrg. 밖에서 생각하기 전에 항상 상자 안을 살펴보십시오. 쉿!

— dudewad 2015-08-26

8

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

— 일리아 콜리
소스

워 ... 멋지네요. 나는 나침반의 힘에 깜짝 놀랐다. 응답을 주셔서 감사합니다

— 팻 뉴웰

7

rgba 함수는 투명도가없는 색상에서는 작동하지 않으며 16 진수를 다시 반환합니다. 결국, 그것은 헥스를 rgba로 변환하는 것을 의미하지 않습니다. 우리는 단지 헥스에서 이익을 얻고 있지만 알파를 허용하지 않습니다.

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

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

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

— 카를로스 마르티네스
소스

2

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

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

— mikespainhower
소스

2

from_hex(hex_string, alpha = nil);

로부터 문서 :

유효한 CSS 16 진수 문자열에서 새 색상을 만듭니다. 선행 해시는 선택 사항입니다.

— user776411
소스