1

私はIEで使用するための素敵なsvgグラデーションを返すサービスを持っています、そして私はこれをこのようなより少ないミックスインで使用しようとしています-

.Gradient(@start, @stop) {
  background-image: url("/imageService/GradientSvg?startColor=@{start}&endColor=@{stop}");
}

問題は、これらの色が＃で始まることです。これは、サーバーが受信するURLを切り捨てます。

＃なしで色を取得する方法が必要です。RGB値でも、プレフィックスなしの16進値でもかまいません。

このようなjavascript呼び出しを使用して＃をURLエンコードしようとしました

  background-image: url(`"/shop/image/GradientSvg?startColor=@{start}&endColor=@{stop}".replace("#","%23")`);

そして、サーバー上で行われている処理が少なく、この方法でJavaScriptを評価できないことを除けば、うまくいったと思います。

URLで機能する方法で色を抽出する方法はありますか？私はサービスの仕組みに柔軟性があります。

4

3 に答える 3

2

これが私が思いついた解決策です。カラー関数を使用して、わずかな透明度を適用します。これにより、＃で始まる色ではなく、常にRGBA色で終わることが保証されます。

.Gradient(@start, @stop) {
  @startRgb: fadeout(@start,1%);
  @stopRgb: fadeout(@stop,1%);
  background-image: url("/ImageService/GradientSvg?startColor=@{startRgb}&endColor=@{stopRgb}");

URLには常に色のrgba表記が含まれているので、私のサービスは満足しています。

于 2012-05-18T09:44:56.643 に答える
1

色ごとに2つの変数を使用してもかまわない場合は、color関数を使用して文字列を変換できます。

@myColorString: "FFD700";
@myColor: color("#@{myColorString}");

必要な変数を使用してください。

color: @myColor;
background-image: url("/colors?color=@{myColorString}");
于 2012-05-18T08:03:12.257 に答える
0

色を色ではなく文字列として渡すことはできますか？したがって、ミックスインを呼び出すと、次のようになりますか？：

.Gradient("000000", "FFFFFF");

これらの色を他の場所で色として定義する必要がある場合は、バッククォートを使用してJavascriptで値を解析してみてください。したがって、次のようになります。

@noHash: ~`"@{start}".substring(1)`;

ただし、これらの色の値をJSに渡すとどのように見えるかはわかりません。それらはカラーオブジェクトである可能性があり、文字列への変換が必要です。いつか試してみる必要があると思います...

于 2012-05-17T21:56:11.963 に答える