LESS ミックスインとして追加することで、任意の数のアイテムに適用できるモジュラー グラデーションを作成する方法を探しています。
たとえば、グラデーションを適用したい平らな赤いボタンがあるとします。ベースの赤い色とグラデーションでフェードする濃い赤の色を選択する代わりに、フラットな赤いボタンの背景に黒いグラデーション (上部が透明な部分) をオーバーレイしたいと思います。一色（黒）ですが、黒から赤へと色褪せているように錯覚させます。理論的には、この同じグラデーション mixin を複数のアイテムに 1 つの方法で重ねることができます。大量の異なるグラデーション値を定義する必要はありません。
純粋な css のサンプル コードを次に示します。
.btn {
background: red;
background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 1)), color-stop(1,black));
}
このコードにより、グラデーション (黒) が読み込まれます。背景の div または体の色に設定されていない限り、赤は透けて見えません。同じクラスに付けたいです。LESSバージョンは次のとおりです。
.gradient (@startColor: fade(@black, 0%), @endColor: fade(@black, 50%)) {
background-color: @black;
background: -webkit-gradient(linear, left top, left bottom, from(@startColor), to(@endColor), color-stop(1,#000000));
}
私がやりたいことに最も近いのは、背景色を赤に設定し、その上に半透明のグラデーションを重ねることです。ただし、インラインボタンなどにターゲットカラーを配置したいと思います...これは、色付きの背景に透明なグラデーションを表示するフィドルです。
実物（ボタン）の背景にカラー値を付けることは可能ですか？グラデーションの読み込みが一番上ですか？