CSS の前景と背景の自動カラーマッチングテクノロジの紹介 (コード例)-CSSチュートリアル-php.cn

#この記事の内容は CSS の前景と背景の自動カラーマッチング技術に関するもので、必要な方は参考にしてください。。それが役に立てば幸い。

1. カラーマッチング効果のプレビュー

次の GIF は、ボタンの背景色が徐々に明るくなると、テキストの色も元の白から黒に変わり、境界線が変化することを示しています。はい、カラーマッチング変換は純粋な CSS を使用して実装されています。

CSS の前景と背景の自動カラーマッチングテクノロジの紹介 (コード例)

自動カラーマッチングボタン表示

R、G、B の対応するスライダーをドラッグすると、ボタンの文字色と境界線の色が表示されます。色が異なると背景が自動的に変化します。具体的なパフォーマンスは次のとおりです。

暗い背景では、テキストは白で枠線がありません。

明るい背景では、テキストは黒く、周囲の環境と簡単に区別できるように枠線が暗くなります。

このスマートマッチングは、主に CSS3 calc() 計算と CSS3 ネイティブ var 変数を使用して、純粋な CSS で実装されています。

2. カラーマッチングコードの表示

HTML コードは次のように非常に単純です:

<button class="btn">我是按钮</button>

ログイン後にコピー

重要で難しいのは CSS 部分です:

:root {
/* 定义RGB变量 */
--red: 44;
--green: 135;
--blue: 255;
/* 文字颜色变色的临界值，建议0.5~0.6 */
--threshold: 0.5;
/* 深色边框出现的临界值，范围0~1，推荐0.8+*/
--border-threshold: 0.8;
}
.btn {
/* 按钮背景色就是基本背景色 */
background: rgb（var（--red）， var（--green）， var（--blue））；
/**
* 使用sRGB Luma方法计算灰度（可以看成亮度）
* 算法为：
* lightness = （red * 0.2126 + green * 0.7152 + blue * 0.0722） / 255
*/
--r: calc（var（--red） * 0.2126）；
--g: calc（var（--green） * 0.7152）；
--b: calc（var（--blue） * 0.0722）；
--sum: calc（var（--r） + var（--g） + var（--b））；
--lightness: calc（var（--sum） / 255）；
/* 设置颜色 */
color: hsl（0, 0%, calc（（var（--lightness） - var（--threshold）） * -999999%））；
/* 确定边框透明度 */
--border-alpha: calc（（var（--lightness） - var（--border-threshold）） * 100）；
/* 设置边框相关样式 */
border: .2em solid;
border-color: rgba（calc（var（--red） - 50）， calc（var（--green） - 50）， calc（var（--blue） - 50）， var（--border-alpha））；
}

ログイン後にコピー

一見、Duck Ting Lei のように見えますが、意味はわかりませんが、実際には複雑ではありません。実装原理を分析してみましょう。

3. 前景と背景の自動カラーマッチングの原理

1. CSS プロパティ値の範囲オーバーフロー境界レンダリング機能

CSS には非常に興味深い機能があります。 CSS プロパティ値です。通常の範囲を超える場合、形式が正しい限りレンダリングされ、レンダリングされた値が正当な境界値となります。

栗を 2 つ考えます:

不透明度の透明度属性値の有効範囲は 0 ～ 1 ですが、負の数値または最大値を設定した場合、ブラウザはそれを解析することもできます。ただし、次のように 0 か 1 のどちらかです。

.example {
opacity: -2;    /* 解析为 0, 完全透明 */
opacity: -1;    /* 解析为 0, 完全透明 */
opacity: 2;     /* 解析为 1, 完全不透明 */
opacity: 100;   /* 解析为 1, 完全不透明 */
}

ログイン後にコピー

HSL などのカラー値、S と L の範囲は 0% ～ 100% ですが、負の数値を設定した場合は 0% ～ 100% になります。または最大値でも、ブラウザは次のように 0% または 100% を解析できます。

.example {
color: hsl（0, 0%, -100%）；    /* 解析为 hsl（0, 0%, 0%）， 黑色 */
color: hsl（0, 0%, 200%）；     /* 解析为 hsl（0, 0%, 100%）， 白色 */
}

ログイン後にコピー

この記事のカラーマッチングテクノロジは、この境界レンダリング機能を最大限に活用しています。

2. var 変数は、複雑な計算を実装するために calc に渡されます。

CSS コードを上から下まで 1 つずつ分析します。

まず、ルートセレクターでいくつかのグローバル CSS 変数 (意味的にグローバル) を定義します:

:root {
--red: 44;
--green: 135;
--blue: 255;
--threshold: 0.5;
--border-threshold: 0.8;
}

ログイン後にコピー

その中に:

–threshold

これは重要です色の変色の値。現在の RGB カラー値の明るさと比較するために使用されます。

–border-threshold

これは境界線の色の透明度の重要な値であり、現在の RGB カラー値との明るさの比較でもあります。＃＃＃＃＃＃その後。 btn{} 内の CSS コード:

background: rgb（var（--red）， var（--green）， var（--blue））；

ログイン後にコピー

これは理解しやすいですが、背景色としての基本的な RGB カラー値です。

--r: calc（var（--red） * 0.2126）；
--g: calc（var（--green） * 0.7152）；
--b: calc（var（--blue） * 0.0722）；
--sum: calc（var（--r） + var（--g） + var（--b））；
--lightness: calc（var（--sum） / 255）；

ログイン後にコピー

ここには 5 つの CSS 変数が 5 行あります。実際に必要なのは最後の明度で、現在の背景色の明るさを計算します。使用されるのは sRGB Luma グレースケールアルゴリズムです。なぜ 5 ライン必要なのでしょうか。計算式は次のとおりです:

lightness = （red * 0.2126 + green * 0.7152 + blue * 0.0722） / 255

ログイン後にコピー

このうち、R、G、B のカラー値を乗算する係数は固定されており、グレースケールアルゴリズムが異なると係数が異なります。 --lightness は明るさを表し、範囲は 0 ～ 1 です。このとき、それを 2 つの重要な値 --threshold と --border-threshold と比較して、テキストの色と境界線の透明度を決定できます。ボタン。

① ここでのグレースケールは明るさとみなすことができます。実際、HSL の明るさの計算方法は、R、G、B の最大値と最小値の合計の 1/2 でなければなりません。

color: hsl（0, 0%, calc（（var（--lightness） - var（--threshold）） * -999999%））

ログイン後にコピー

色を設定するCSSコード。

ここでの計算計算は中国語に翻訳されます: (明るさの値 – 臨界値) * 比例係数。

明るさの値は 0 ～ 1 の間を変動し、臨界値は 0.5 に固定されています。したがって、

明るさの値が 0.5 未満の場合、明るさの値から臨界値を引いた値は負になります。比例係数は非常に大きな負の数であるため、境界レンダリングの原則に従って、大きな正の数が得られるため、色は白になります。

明るさの値が 0.5 より大きく、明るさの値から臨界値を引いた値が正の場合、スケール係数は非常に大きな負の数であるため、境界に従って大きな負の数が得られます。レンダリング原理、0% でレンダリングされるため、色は黒になります ;

上記は、ボタンのテキストの色が背景では黒、暗い背景では白に変化する原理です。

--border-alpha: calc（（var（--lightness） - var（--border-threshold）） * 100）；

ログイン後にコピー

境界線の透明性も同様の原理です。ここでの計算を中国語に翻訳すると、(明るさの値 – 境界臨界値) * 100 となります。

明るさの値は 0 ～ 1 の間を変動し、境界臨界値は 0.8 に固定されています。したがって、

明るさの値が 0.8 未満の場合、明るさの値から境界臨界値を引いた値になります。は負です。CSS では、負の透明度は境界線 0 に従ってレンダリングされ、この時点で境界線は完全に透明になります。

明るさの値が 0.8 より大きい場合、明るさの値から境界線の臨界値を引いた値になります。が正であり、このとき計算される透明度の値は0〜20の間をさまよいます。もちろん、1を超える透明度の値は1としてレンダリングされます。このとき、境界線は基本的に完全に不透明で、深くなった境界線は

border: .2em solid;
border-color: rgba（calc（var（--red） - 50）， calc（var（--green） - 50）， calc（var（--blue） - 50）， var（--border-alpha））；

ログイン後にコピー

境界線のスタイルを設定します。境界線の色は背景色よりも適切です。深さは 50 単位で (負の数値は 0 として表示されます)、透明度は明るさに基づいて動的に計算されます。暗い背景では、ボタンの境界線の透明度は 0 で表示されません。明るい背景では、透明度は 0 ～ 1 の範囲で表示され、北京色が明るくなるほど、境界線の透明度は高くなり、境界線の色は暗くなります。カラーマッチングの期待と一致しています。

相信经过上面的一番剖析，大家就会明白其实现的原理了。

改变按钮的背景色

.btn类名下的CSS代码是固定的，让我们需要改变按钮的颜色的时候，不是改。btn下的CSS，而是修改：root中的下面3个变量值：