web-dev-qa-db-ja.com

Sass / Compass-16進数、RGB、または名前付き色をRGBAに変換

これはCompass 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);
csssasscompass-sassrgba
77
Pat Newell

Sassに組み込まれている rgba関数を使用

色の不透明度を設定します。

例：

rgba（＃102030、0.5）=> rgba（16、32、48、0.5）
rgba（blue、0.2）=> rgba（0、0、255、0.2）

パラメーター：
（色）色
（数値）alpha — 0から1までの数値

返却値：
（色）

コード：

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

rgbapng compass plugin を使用します

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);
8
Ilia Choly

Rgba関数は、透明度のない色では機能せず、再び16進数を返します。結局のところ、それはヘックスをrgbaに変換することを意味するものではなく、アルファを許可しないヘックスから利益を得ているだけです（まだ）。

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

それで、私はrgb文字列を埋める小さな関数を作成しました。今のところ、透明度に対処する必要はありません。

@function toRGB ($color) {
    @return "rgb(" + red($color) + ", " + green($color) + ", " + blue($color)+ ")";
}
4
Carlos Martínez

IEの## AARRGGBB形式のie-hex-str（）もあります。

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

ドキュメント から：

有効なCSS 16進文字列から新しい色を作成します。先頭のハッシュはオプションです。

2
user776411