7

私はCSSプリプロセッサLESSで次のことを行うブロックを書き込もうとしています。

@transparent_background(@color; @alpha: .8)
{
  background: @color;
  background: rgba(<color R value>, <color G value>, <color B value>, @alpha);
}

標準の16進定義（つまり#rrggbb）の場合、@ colorからRGB値を取得する方法はありますか？@colorが他の方法で定義されている場合、これを行う方法はありますか？

編集：ソリューション

@transparent_background(@color; @alpha: .8)
{
  background: @color;
  background: @color + rgba(0, 0, 0, @alpha);
}
4

4 に答える 4

3

これを試して：

background: @color - rgba(0, 0, 0, 1.0) + rgba(0, 0, 0, @alpha);

減算によりアルファチャネルがクリアされ@color、必要なものをアルファチャネルに追加するだけ@alphaです。色には完全な演算子スイートがあり、2つの色で操作する場合、コンポーネントごとに機能します。色は内部でRGBAコンポーネントとして保存されるため、これは機能するはずです。また、アルファチャネルは間隔内にあるように正規化されている[0, 1.0]ため、アルファチャネルから1.0を引くと、問題なくクリアされます。

現在CSSSLESSを設定していないので確認できませんが、これは一見の価値があります。

于 2010-12-15T01:43:27.210 に答える
2

どのソリューションも機能しなくなりましたが、これは機能します（@Elyseのおかげで）：

.alpha(@color, @alpha: 0.8) {
    color: @color;
    color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha);
}

このhsla()関数は、LESS Webサイトではアドバタイズされていませんが、ソースコードで定義されています。

于 2012-01-01T19:04:57.847 に答える
2

LESSのフェードイン/フェードアウト機能を続行することもできることに注意してください。

.alpha(@color, @alpha: 80)
{
    background-color: fadeout(@color, (100 - @alpha));
}

したがって、 .alpha （red、25）は、背景色rgba（255、0、0、0.25）になります。

于 2012-01-06T11:20:14.100 に答える
2

これは古い質問ですが、アルファ値を追加するだけの場合は、を使用してfade(@color, @alpha)ください。色は、16進数、rgba、またはhslaにすることができます。

于 2012-06-20T21:42:30.050 に答える