1. mix-blend-mode 属性の概要 2. mix-blend-mode の共通属性値 3. Mix-blend-mode 属性の適用 1. 適用効果 2. 関連コード 4. テキストインテリジェント適応の背景 1 . オリジナルスタイル 2. ミックスを追加 3. 実装コード
CSS の [ mix-blend-mode 属性] は、要素のコンテンツをその要素の直接の親要素のコンテンツおよび要素の背景とどのようにブレンドするかを記述します。
要素の背景と前景の間のブレンド モードを設定するために使用されます。さまざまな視覚効果を作成するために、background-image 属性とともに使用できます。
| シリアルナンバー | 属性値 | ブレンドモードと手順 |
|---|---|---|
| 1 | ミックスブレンドモード:通常; | Normal:このプロパティはブレンドを適用しません。 |
| 2 | ミックスブレンドモード:乗算; | 乗算:要素に背景を乗算し、背景色を置き換えます。結果の色は常に背景と同じくらい暗くなります。 |
| 3 | ミックスブレンドモード:オーバーレイ; | オーバーレイ:ハード ライト ブレンディング モードとは対照的に、背景色に基づいてコンテンツを乗算またはマスクします。 |
| 4 | ミックスブレンドモード:画面; | 画面:背景とコンテンツを掛け合わせ、結果を補完します。これにより、コンテンツが背景色よりも明るくなります。 |
| 5 | ミックスブレンドモード:暗くします。 | Darken ; コンテンツが暗くなると、背景がコンテンツに置き換えられます。それ以外の場合はそのままです。 |
| 6 | ミックスブレンドモード:明るくする; | 明るくする:背景が明るいコンテンツに置き換えられます。 |
| 7 | ミックスブレンドモード:カラー覆い焼き; | Color Lighten:このプロパティは、コンテンツの色を反映するために背景色を明るくします。 |
| 8 | ミックスブレンドモード:カラーバーン; | カラーライトニング:コンテンツの自然な色を反映するために背景を暗くします。 |
| 9 | ミックスブレンドモード:ハードライト; | ハードライト:コンテンツの色に応じて、このプロパティはコンテンツをフィルターまたは乗算します。 |
| 10 | ミックスブレンドモード:ソフトライト; | ソフト ライト:コンテンツの色に応じて、暗くなったり明るくなったりします。 |
| 11 | ミックスブレンドモード:違い; | Difference : 2 つの色の中で最も明るい色から暗い方を差し引きます。 |
| 12 | ミックスブレンドモード:除外; | 除外: 差分に似ていますが、コントラストが低くなります。 |
| 13 | ミックスブレンドモード:色相; | 色相: コンテンツの色相と背景の彩度および明るさを組み合わせて色を作成します。 |
| 14 | ミックスブレンドモード:彩度; | 彩度: コンテンツの彩度と背景の色相と明るさによって色を作成します。 |
| 15 | ミックスブレンドモード:カラー; | カラーブレンディング:コンテンツの色相と彩度、および背景の明るさに基づいて色を作成します。 |
| 16 | ミックスブレンドモード:明度; | 明度: コンテンツの明度と背景の色相と彩度に基づいて色を作成します。これは color プロパティの逆です。 |
Normal : この属性はブレンドを一切適用しません。multiply : 要素に背景を乗算し、背景色を置き換えます。結果の色は常に背景と同じくらい暗くなります。screen : 背景を乗算し、その結果をコンテンツで補完します。結果は、background-color.overlay よりも明るいコンテンツになります。これは、背景色に応じてコンテンツを乗算またはスクリーンします。これは、ハードライト ブレンドの逆です。mode.darken : 背景は、コンテンツが存在するコンテンツに置き換えられます。より暗い、それ以外の場合は、そのままになります。lighten : 背景は、コンテンツが明るいコンテンツに置き換えられます。color-dodge : この属性は、コンテンツの色を反映して背景色を明るくします。color-burn : 背景を暗くします。コンテンツの自然な色を反映します。hard-light : コンテンツの色に応じて、この属性がスクリーンまたは乗算されます。soft-light : コンテンツの色に応じて、暗くまたは明るくなります。difference : 暗い色を差し引きます。二人のうち最も明るい色から色を選択します。 exclusion : 差に似ていますが、コントラストが低くなります。 hue : コンテンツの色相と背景の彩度および明度を組み合わせた色を作成します。 saturation : コンテンツの彩度を組み合わせた色を作成します。背景の色相と明度。 color : コンテンツの色相と彩度、背景の明度で色を作成します。 luminosity : コンテンツの明度と色相で色を作成します。背景の彩度。これはカラー属性の逆です。
エフェクト表示クリック
mix-blend-mode 属性の適用
<!DOCTYPE html>
<html lang="ja">
<頭>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width、initial-scale=1.0">
<title>mix-blend-mode 属性の適用</title>
<スタイル>
* {
マージン: 0;
パディング: 0;
}
。容器 {
/* 変数を定義します */
--ミックスブレンドモード: 通常;
位置: 相対的;
幅: 300ピクセル;
高さ: 400ピクセル;
マージン: 60px;
パディング: 20px;
ボックスシャドウ: 0 0 6px 1px #999;
境界半径: 6px;
キャレットの色: 透明;
}
h3、
h4 {
マージン-ボトム: 10px;
}
.info-box {
幅: 100%;
高さ: 24px;
行の高さ: 24px;
}
。丸 {
位置: 絶対;
幅: 200ピクセル;
高さ: 200ピクセル;
境界半径: 50%;
ミックスブレンドモード: var(--ミックスブレンドモード);
}
.red-box {
左: 70ピクセル;
上: 160ピクセル;
背景色: 赤;
}
.green-box {
左: 30ピクセル;
上: 220ピクセル;
背景色: ライトグリーン;
}
.blue-box {
左: 110ピクセル;
上: 220ピクセル;
背景色: 青;
}
</スタイル>
</head>
<本文>
<div class="コンテナ">
<h3>mix-blend-mode 属性の適用</h3>
<h4 class="value-box"></h4>
<div class="info-box"></div>
<div class="circle red-box"></div>
<div class="circle green-box"></div>
<div class="circle blue-box"></div>
</div>
</body>
<スクリプト>
// 要素を取得します varcontainer = document.querySelector(".container");
var valueBox = document.querySelector(".value-box");
var infoBox = document.querySelector(".info-box");
//mix-blend-mode 属性の値リストと説明。
var 値 = [
{
ID:1、
名前：「普通」、
値: "通常"、
info: "このプロパティはブレンドを適用しません。"
}、
{
ID:2、
名前: 「乗算」、
値: "乗算"、
info: "要素は背景と乗算され、背景色が置き換えられます。結果の色は常に背景と同じくらい暗くなります。"
}、
{
ID:3、
名前: "オーバーレイ"、
値: "オーバーレイ"、
info: "背景色に基づいてコンテンツを乗算またはマスクします。これはハード ライト ブレンディング モードの逆です。"
}、
{
ID:4、
名前: 「スクリーン」、
値: "画面"、
info: "背景とコンテンツを乗算し、その結果を補足します。これにより、コンテンツが背景色よりも明るくなります。"
}、
{
ID:5、
名前：「ダーク」、
値: "暗く"、
info: "コンテンツが暗くなると、背景がコンテンツに置き換えられます。それ以外の場合は、そのまま残ります。"
}、
{
ID:6、
名前：「明るくする」、
値: "明るくする"、
info: "背景は明るいコンテンツに置き換えられます。"
}、
{
ID:7、
名前: 「色あせ」、
値: "カラー覆い焼き"、
info: "このプロパティは、コンテンツの色を反映するために背景色を明るくします。"
}、
{
ID:8、
名前: 「色あせ」、
値: "カラーバーン"、
info: "コンテンツの自然な色を反映するために背景が暗くなります;"
}、
{
ID:9、
名前：「ハードライト」、
値: "ハードライト"、
info: "このプロパティは、色に基づいてコンテンツをフィルタリングまたは乗算します。"
}、
{
ID:10、
名前：「ソフトライト」、
値: "ソフトライト"、
info: "コンテンツの色に応じて、暗くなったり明るくなったりします。"
}、
{
ID:11、
名前：「違い」、
値: "差"、
info: "これは、2 つの色のうち最も明るい色から暗い方を減算します。"
}、{
ID:12、
名前: "除外"、
値: "除外"、
info: "違いと似ていますが、コントラストが低くなります。"
}、
{
ID:13、
名前：「ヒュー」、
値: "色相"、
info: "コンテンツの色相と背景の彩度および明るさを組み合わせて色を作成します。"
}、
{
ID:14、
名前: 「彩度」、
値: "彩度"、
info: "コンテンツの彩度と背景の色相と明るさから色を作成します。"
}、
{
ID:15、
名前: 「カラーミックス」、
値: "色"、
info: "コンテンツの色相と彩度、および背景の明るさに基づいて色を作成します。"
}、
{
ID:16、
名前：「明るさ」、
値: 「明るさ」、
info: "コンテンツの明度、背景の色相と彩度に基づいて色を作成します。これは色のプロパティの逆です。"
}
】
変更モード();
//ミックスブレンドモードを変更する
関数changeMode() {
インデックス = 0 とします。
modAttr(インデックス);
let timerId = setInterval(() => {
if (インデックス >= 値.長さ) {
クリアインターバル(タイマーId);
戻る;
}
インデックス++;
modAttr(インデックス)
}、3000)
}
関数 modAttr(インデックス) {
//ミックスブレンドモードのプロパティ値を設定しますcontainer.style.setProperty('--mix-blend-mode',values[index].value);
valueBox.innerHTML = `ミックスブレンドモード: ${values[index].value};`;
infoBox.innerHTML = `${values[index].name}(${values[index].value}): ${values[index].info}`
}
</script>
</html>多くの場合、テキストを画像の隣に表示する必要があります。テキストと画像の色が近いと、読みやすさに重大な影響が生じます。
テキストを背景に自動的に適応させるにはどうすればよいですか?
mix-blend-mode 属性を使用してテキストと背景の色の混合を設定し、テキストが背景に適応する効果を実現できます。
一部の画像では文字の色が白くなり、読みにくくなります。
.grid-item > h3 {
カラー: rgb(255, 255, 255);
...
}
mix-blend-mode 属性をDifference に設定します。
テキストの色の初期値は白ですが、親要素の背景に対応する各ピクセルの色の値を使用して差が計算され、新しい色の値が取得されます。
テキストの色の値 - 背景の色の値 = 混合ピクセル値 (各ピクセル)
例: 文字色 (255, 255, 255)、背景色 (255, 255, 255)、計算値 (0, 0, 0)、黒で表示。
.grid-item>h3 {
カラー: rgb(255, 255, 255);
/* ブレンド モードを設定します -- 差分を計算します */
ミックスブレンドモード: 違い;
...
}注: ここでの差分ブレンド モードはテキストに適用されます。
<!DOCTYPE html>
<html lang="ja">
<頭>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width、initial-scale=1.0">
<title>テキストは背景にインテリジェントに適応します</title>
<スタイル>
* {
マージン: 0;
パディング: 0;
}
。容器 {
ディスプレイ: フレックス;
幅: 100vw;
高さ: 60vh;
コンテンツの位置揃え: 中央;
整列項目: 中央;
}
.grid-container {
表示: グリッド;
グリッド テンプレート列: 400px 400px 400px;
グリッド テンプレート行: 200 ピクセル 200 ピクセル;
ギャップ: 10px;
}
.grid-item {
背景リピート: リピートなし;
背景サイズ: カバー;
境界半径: 6px;
ボックスシャドウ: 0 0 6px 1px #999;
}
.grid-item>h3 {
カラー: rgb(255, 255, 255);
フォントサイズ: 36px;
/* ブレンド モードを設定します -- 差分を計算します */
ミックスブレンドモード: 違い;
}
.grid-item:nth-child(1) {
/* 背景画像: url("D:\test\zyl-img\bg_1.jpg");
背景色: 赤
}
.grid-item:nth-child(2) {
/* 背景画像: url("D:\test\zyl-img\bg_2.jpg");
背景色: 紫;
}
.grid-item:nth-child(3) {
/* 背景画像: url("D:\test\zyl-img\bg_3.jpg");
背景色: 黄色;
}
.grid-item:nth-child(4) {
/* 背景画像: url("D:\test\zyl-img\bg_4.jpg");
背景色: 緑;
}
.grid-item:nth-child(5) {
/* 背景画像: url("D:\test\zyl-img\bg_5.jpg");
背景色: ティール;
}
.grid-item:nth-child(6) {
/* 背景画像: url("D:\test\zyl-img\bg_6.jpg");
背景色: 青;
}
</スタイル>
</head>
<本文>
<div class="コンテナ">
<div class="グリッドコンテナ">
<div class="グリッドアイテム">
<h3>mix-blend-mode 属性の適用</h3>
</div>
<div class="グリッドアイテム">
<h3>mix-blend-mode 属性の適用</h3>
</div>
<div class="グリッドアイテム">
<h3>mix-blend-mode 属性の適用</h3>
</div>
<div class="グリッドアイテム">
<h3>mix-blend-mode 属性の適用</h3>
</div>
<div class="グリッドアイテム">
<h3>mix-blend-mode 属性の適用</h3>
</div>
<div class="グリッドアイテム">
<h3>mix-blend-mode 属性の適用</h3>
</div>
</div>
</div>
</body>
</html>CSS の mix-blend-mode 属性の詳細な説明 (要素のミックス モードの設定) についてのこの記事は終わりです。 css mix-blend-mode 属性の詳細については、downcodes.com で以前の記事を検索してください。以下の関連記事を引き続き参照してください。今後も downcodes.com をサポートしていただければ幸いです。