背景の透明度を使用して、さまざまな色の背景グラデーションを設定する gradient_html/css_WEB-ITnose

プロジェクトはここ数日間、さまざまなテーマの色設定スキームに取り組んでいます。問題なのは、テーマの 1 つで、すべての色がユーザーによって入力された色に従って設定される必要があることです。リスト ヘッダーの背景色は 2 ～ 3 です。グループ グラデーション値の線形グラデーション、つまり、ユーザーが入力した色の値に基づいて、異なるが非常によく似たグラデーション カラーを生成します。インターネットで情報を調べてみると、入力した Web ページの内容に基づいてグラデーション色の自動塗りつぶしをサポートする JS が存在します。しかし、私のように JS が苦手な人間にとっては、やはり何らかの方法を見つけたいと思います。 css3。

CSS3 の背景グラデーションの透明度を使用すると、この問題を解決できることがわかりました (背景グラデーションの色が似ている場合)。

ここでcss3の背景グラデーションの線形グラデーションについて簡単に説明します。線形グラデーションの一般的な構造は次のとおりです:

background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.1) 0%, rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0.2) 98%, #FFFFFF 100%);

各ブラウザのレンダリング方法は次のように分かれています。

Webkit:

background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.1) 0%, rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0.2) 98%, #FFFFFF 100%);

グラデーションの種類 - プロパティ内 - webkit-linear-gradient

Gradientどこから始めるか(上)

グラデーション内の色の値と位置(rgba(0,0,0,0.1) 40%)

以下の書き方は古いバージョンのSafariの場合です

background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 0.1)), color-stop(40%, rgba(0, 0, 0, 0.1)), color-stop(98%, rgba(0, 0, 0, 0.2)),color-stop(100%, #FFFFFF));

グラデーションの種類(リニア)

グラデーションの開始の X 座標と Y 座標 (0 0 または左上)

グラデーションの終了の X 座標と Y 座標 (0 100% または左下)

カラー値(color-stop(40%, rgba( 0,0,0,0.1)))

Mozilla:

background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.1) 0%, rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0.2) 98%, #FFFFFF 100%);

Firefox でのグラデーションの描画方法は Safari とほぼ同じですが、違う点は次のとおりです。 gradient 属性を -moz-linear-gradient に変更する必要があります

Opera :

background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.1) 0%, rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0.2) 98%, #FFFFFF 100%);

上記の記述方法に従って、Opera ブラウザにレンダリングさせ、属性を -o-linear-gradient に直接変更します。とても簡単なことではありませんか？

IE:

IE は頑固で、グラデーションをサポートしていませんが、グラデーション フィルターを提供します

filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#22FFFFFF', EndColorStr='#33000000');

ここまで言っておきますが、誰もが次の rgba(0, 0, 0, 0.1) を心配しています。 0.1 興味がありますか？はい、この頭痛を解決する鍵はまさにそれです - グラデーションの透明度です。グラデーションの透明度 (0.1 ～ 0.9 の値) を設定すると、さまざまな透明度の値でグラデーションの色を作成できます。つまり、透明度を通じて、背景にさまざまな透明度の背景色を表示できます。

下の図は、上記のコードによって生成された背景のグラデーションです:

グラデーションが透明であることがわかりませんか (灰色に感じます)。そう、カラー値が白から黒なので、中間の遷移色は当然グレーになります。でも背景色を入れると効果が出ます。

たとえば、背景色を追加しましょう: #92D050:

背景に異なるグラデーションカラーを表示するには、背景色を設定するだけです。

完全なコード:

1 background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.1) 0%, rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0.2) 98%, #FFFFFF 100%);2 background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 0.1)), color-stop(40%, rgba(0, 0, 0, 0.1)), color-stop(98%, rgba(0, 0, 0, 0.2)),color-stop(100%, #FFFFFF));3 background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.1) 0%, rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0.2) 98%, #FFFFFF 100%);4 background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.1) 0%, rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0.2) 98%, #FFFFFF 100%);5 filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#22FFFFFF', EndColorStr='#33000000');6 background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.1) 0%, rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0.2) 98%, #FFFFFF 100%);7     background-color: #669900;

rgba() の色 (rgb) は通常白 (255, 255, 255) または黒 (0,0,0) で、透明度の設定は必要なものによって異なります。グラデーション効果が欲しいですか？

さまざまなグラデーションカラーの例をいくつか示します:

background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.9) 10%, rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0.2) 98%, #FFFFFF 100%);

background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.9) 2%, rgba(0, 0, 0, 0.5) 40%, rgba(0, 0, 0, 0.2) 98%, #FFFFFF 100%);

それでは、背景の透明度をうまく活用できればグラデーションを使用すると、統一された背景のグラデーション カラーを広範囲に定義でき、ユーザーはカラー フィールドを入力するだけでテーマを目的のグラデーション効果に設定できます。残念ながら、現時点では、この方法は背景のグラデーションカラーが似ているテーマにのみ適用できます。複数の色の背景のグラデーションは、依然としてこの方法で記述する必要があります

すごいです