Menu Close
検索
カジノファインダー
ホームページ★CSSリファレンス
アップデート 17 7月, 2024

★CSSリファレンス

山田 太郎
山田 太郎
テック・リード
山田太郎は、ウェブ開発やグラフィックスプログラミングに10年以上の経験を持つテクノロジーの専門家です。特にHTML5 CanvasやJavaScript、インタラクティブメディアに精通しており、動的なユーザーインターフェースや最先端のウェブアプリケーションの開発に携わってきました。複雑な図形描画や画像操作、リアルタイムグラフィックスに関する知識が豊富で、ウェブ技術の限界を追求する開発者たちにとって頼りになる存在です。知識の共有に情熱を持ち、初心者からプロフェッショナルまで幅広く支援するため、技術フォーラムやブログにも積極的に貢献しています。
山田 太郎 全ての投稿者
テック・リード

私たちはカジノサイトを独自にレビューしています。当社のリンクを通じてサインアップすると、追加料金なしで当社に手数料が発生する場合があります。

background-blend-mode …… 背景色と背景画像のブレンド方法を指定する
Google Chrome
Safari
Firefox
Opera
広告



background-blend-modeプロパティは、背景色と背景画像のブレンド方法を指定する際に使用します。

background-blend-modeプロパティの各値を指定した際の表示結果は、
フォトショップなどのグラフィックソフトで、
下レイヤーと上レイヤーの色を掛け合わせたときの効果を想定するとイメージしやすいでしょう。

■値

以下の値から、カンマ区切りで複数指定できる。

normal
通常 … 背景色をブレンドしない（初期値）
multiply
乗算 … 絵具を混ぜたような結果となる
screen
スクリーン … スクリーンを重ねたような（光を掛け合わせたような）結果となる
overlay
オーバーレイ … 下レイヤー色に応じて、乗算、または、スクリーンで合成する。下レイヤー色が暗い色なら乗算でより暗く合成され、下レイヤー色が明るい色ならスクリーンでより明るく合成される
darken
比較（暗） … 下レイヤー色と上レイヤー色のそれぞれのRGB値を比較して、よりRGB値の低い（暗い）色を採用する
lighten
比較（明） … 下レイヤー色と上レイヤー色のそれぞれのRGB値を比較して、よりRGB値の高い（明るい）色を採用する
color-dodge
覆い焼き … 明るい色はより明るくなり、画面は明るくコントラストは強くなる
color-burn
焼き込み … 暗い色はより暗くなり、画面は濃くコントラストは強くなる
hard-light
ハードライト … 下レイヤー色と上レイヤー色の合成色に応じて、乗算、または、スクリーンで合成する。明るい色はスクリーンでより明るく、暗い色は乗算でより暗くなるため、強いライトを当てたような効果となる
soft-light
ソフトライト … 下レイヤー色と上レイヤー色の合成色に応じて、覆い焼き、または、焼き込みで合成する。明るい色は覆い焼きでより明るく、暗い色は焼き込みでより暗くなるため、ソフトなライトを当てたような効果となる
difference
差の絶対値 … 下レイヤー色と上レイヤー色を比較して、数値の高い（明るい）ほうから低い（暗い）ほうを引く。白を掛け合わせると反転するが、黒を掛け合わせても変化しないため、部分的に反転したような結果となる
exclusion
除外 … difference と似た結果となるが、よりコントラストが弱い
hue
色相 … 下レイヤー色の輝度と彩度、および、上レイヤー色の色相を組み合わせた結果となる
saturation
彩度 … 下レイヤー色の輝度と色相、および、上レイヤー色の彩度を組み合わせた結果となる
color
カラー … 下レイヤー色の輝度、および、上レイヤー色の色相と彩度を組み合わせた結果となる
luminosity
輝度 … 下レイヤー色の色相と彩度、および、上レイヤー色の輝度を組み合わせた結果となる

■初期値・適用対象・値の継承

初期値
normal
適用対象
すべての要素。SVGでは、コンテナ要素、グラフィックス要素、グラフィックス参照要素に適用される
値の継承
しない

■使用例

CSSソースは外部ファイル（sample.css）に記述

h5.m {
	margin-bottom: 0;
}

div.murasaki {
	background-color: purple;
	background-image: url(../images/michelangelo.gif);
	background-repeat: no-repeat;
	width: 150px;
	height: 200px;
}

HTMLソース

<p>
背景画像として使用するのは、一部が透明なGIF画像です。<br>
<img src="https://www.htmq.com/wp-content/uploads/2024/07/michelangelo.gif">
</p>

<h5 class="m">background-blend-mode: normal;</h5>
<div class="murasaki" style="background-blend-mode: normal;">
</div>

<h5 class="m">background-blend-mode: multiply;</h5>
<div class="murasaki" style="background-blend-mode: multiply;">
</div>

<h5 class="m">background-blend-mode: screen;</h5>
<div class="murasaki" style="background-blend-mode: screen;">
</div>

<h5 class="m">background-blend-mode: overlay;</h5>
<div class="murasaki" style="background-blend-mode: overlay;">
</div>

<h5 class="m">background-blend-mode: darken;</h5>
<div class="murasaki" style="background-blend-mode: darken;">
</div>

<h5 class="m">background-blend-mode: lighten;</h5>
<div class="murasaki" style="background-blend-mode: lighten;">
</div>

<h5 class="m">background-blend-mode: color-dodge;</h5>
<div class="murasaki" style="background-blend-mode: color-dodge;">
</div>

<h5 class="m">background-blend-mode: color-burn;</h5>
<div class="murasaki" style="background-blend-mode: color-burn;">
</div>

<h5 class="m">background-blend-mode: hard-light;</h5>
<div class="murasaki" style="background-blend-mode: hard-light;">
</div>

<h5 class="m">background-blend-mode: soft-light;</h5>
<div class="murasaki" style="background-blend-mode: soft-light;">
</div>

<h5 class="m">background-blend-mode: difference;</h5>
<div class="murasaki" style="background-blend-mode: difference;">
</div>

<h5 class="m">background-blend-mode: exclusion;</h5>
<div class="murasaki" style="background-blend-mode: exclusion;">
</div>

<h5 class="m">background-blend-mode: hue;</h5>
<div class="murasaki" style="background-blend-mode: hue;">
</div>

<h5 class="m">background-blend-mode: saturation;</h5>
<div class="murasaki" style="background-blend-mode: saturation;">
</div>

<h5 class="m">background-blend-mode: color;</h5>
<div class="murasaki" style="background-blend-mode: color;">
</div>

<h5 class="m">background-blend-mode: luminosity;</h5>
<div class="murasaki" style="background-blend-mode: luminosity;">
</div>

↓↓↓

ブラウザ上の表示

背景画像として使用するのは、一部が透明なGIF画像です。

background-blend-mode: normal;
background-blend-mode: multiply;
background-blend-mode: screen;
background-blend-mode: overlay;
background-blend-mode: darken;
background-blend-mode: lighten;
background-blend-mode: color-dodge;
background-blend-mode: color-burn;
background-blend-mode: hard-light;
background-blend-mode: soft-light;
background-blend-mode: difference;
background-blend-mode: exclusion;
background-blend-mode: hue;
background-blend-mode: saturation;
background-blend-mode: color;
background-blend-mode: luminosity;

広告



山田 太郎
テック・リード
山田太郎は、ウェブ開発やグラフィックスプログラミングに10年以上の経験を持つテクノロジーの専門家です。特にHTML5 CanvasやJavaScript、インタラクティブメディアに精通しており、動的なユーザーインターフェースや最先端のウェブアプリケーションの開発に携わってきました。複雑な図形描画や画像操作、リアルタイムグラフィックスに関する知識が豊富で、ウェブ技術の限界を追求する開発者たちにとって頼りになる存在です。知識の共有に情熱を持ち、初心者からプロフェッショナルまで幅広く支援するため、技術フォーラムやブログにも積極的に貢献しています。

ギャンブルガイド もっと見る

カジノファインダー

どのカジノが自分に最適か分からないですか?

サインアップは必要なく、1 分以内に最適なブックメーカーを簡単に見つけることができます。
カジノを探す
Back
質問
Select one of the following options
{"is_any_tile":true}

どのカジノが自分に最適か分からないですか?

Back
Restart
やったー！
これはあなたの選択に基づいた最高のカジノです...
56 users signed up
もっと表示する