136

次のコードがあります。

@color : #d14836;

.stripes span {
    -webkit-background-size: 30px 30px;
    -moz-background-size: 30px 30px;
    background-size: 30px 30px;
    background-image: -webkit-gradient(linear, left top, right bottom,
        color-stop(.25, rgba(209, 72, 54, 1)), color-stop(.25, transparent),
        color-stop(.5, transparent), color-stop(.5, rgba(209, 72, 54, 1)),
        color-stop(.75, rgba(209, 72, 54, 1)), color-stop(.75, transparent),
        to(transparent));

に変換する必要があり@colorますrgba(209, 72, 54, 1)。

そのため、コードを変数から値rgba(209, 72, 54, 1)を生成する Less 関数に置き換える必要があります。rgba()@color

Lessでこれを行うにはどうすればよいですか?

4

4 に答える 4

360

実際、Less 言語には という組み込み関数が付属していますfade。color オブジェクトと絶対不透明度 % を渡します (値が大きいほど透明度が低くなります)。

fade(@color, 50%);   // Return @color with 50% opacity in rgba
于 2013-11-25T21:32:11.197 に答える
107

アルファ キーが必要ない場合は、単純に色の 16 進数表現を使用できます。'1' のアルファを持つ RGBA カラーは、16 進数値と同じです。

以下に、そのことを示す例をいくつか示します。

@baseColor: #d14836;

html {
    color: @baseColor;
    /* color:#d14836; */
}

body {
    color: rgba(red(@baseColor), green(@baseColor), blue(@baseColor), 1);
    /* color:#d14836; */
}

div {
    color: rgba(red(@baseColor), green(@baseColor), blue(@baseColor), 0.5);
    /* rgba(209, 72, 54, 0.5); */
}

span {
    color: fade(@baseColor, 50%);
    /* rgba(209, 72, 54, 0.5); */
}

h3 {
    color: fade(@baseColor, 100%)
    /* color:#d14836; */
}

このコードをオンラインでテストしてください: http://lesstester.com/

于 2013-02-13T22:00:42.990 に答える
12

マイレスミックスイン:

.background-opacity(@color, @opacity) {
    @rgba-color: rgba(red(@color), green(@color), blue(@color), @opacity);

    background-color: @rgba-color;

    // Hack for IE8:
    background: none\9; // Only Internet Explorer 8
    filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d')", argb(@rgba-color),argb(@rgba-color))); // Internet Explorer 9 and down
    // Problem: Filter gets applied twice in Internet Explorer 9.
    // Solution:
    &:not([dummy]) {
      filter: progid:DXImageTransform.Microsoft.gradient(enabled='false'); // Only IE9
    }
}

それを試してみてください。

編集済み: IE フィルターの代替を使用した rgba バックグラウンドで見られるように: IE9 は両方をレンダリングします! 、ミックスインにいくつかの行を追加しました。

于 2013-09-18T18:01:23.323 に答える