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

86

これはコンパス101かもしれませんが、色のアルファ値を設定するミックスインを書いた人はいますか？理想的には、ミックスインに任意の形式の色定義を適用し、透明度を適用したいと思います。

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

— パトリックニューウェル
ソース

179

Sassに組み込まれている機能を使用するrgba

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

例：

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

パラメータ:(
色）色
（数値）アルファ—0から1までの数値

戻り値:(
色）

コード：

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

— maxbeatty
ソース

4

ただやってみなかったなんて信じられない。どうもありがとうございました

— Pat Newell

@jon私がそれを改善できるように、私の答えについて何が混乱していたかについて詳しく説明していただけますか？

— maxbeatty 2013年

@maxbeattyコメントに何が起こったのかわかりませんが、「==>」に戸惑いました...後から考えると明らかなようですが、迷ったときはコメントから必要なコードを区別するのは非常に困難です。コードブロックに実際に使用できるコードを含めるだけで、より明確にできると思います。

— jon 2013年

@jonブロック引用は、Sassのドキュメントから直接引用されています。関連する組み込み関数にリンクするだけではありません。回答に関連資料を含めると便利だと思いました。申し訳ありませんが、これは混乱を招きました。

— maxbeatty 2013年

ああ、当たり前。Arrg。あなたがそれの外で考えることを試みる前に、常に箱の中を見てください。シーシュ！

— dudewad 2015

8

rgbapngコンパスプラグインを使用しています

rgbapngは、クロスブラウザ*互換のRGBAサポートを提供するためのコンパスプラグインです。RGBAをサポートしていないブラウザ用に、その場で単一ピクセルのアルファ透過PNGを作成することで機能します。純粋なRubyChunkyPNGライブラリを使用しているため、インストールとデプロイに手間がかかりません。

インストール

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

— イリア・チョリー
ソース

おっと...すごい。私はコンパスの力に驚かされます。回答ありがとう

— Pat Newell

7

rgba関数は、透明度のない色では機能せず、16進数を再び返します。結局のところ、これは16進数をrgbaに変換することを意図したものではなく、16進数から利益を上げているだけでアルファは許可されていません（まだ）。

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

そこで、RGB文字列を作成する関数を少し作成しました。今のところ、OHPフィルムを扱う必要はありません。

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

ドキュメントから：

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

— user776411
ソース