cman.jp > WEBページ作成TOP > CSSリファレンス
WEBページ作成
広告
background-blend-mode 「背景画像のブレンド効果」
background-blend-modeは、背景画像と背景色に色々な加工（ブレンド）を行うことができます。背景画像と背景画像のブレンドを行うこともできます。
2017年5月時点でIEなど一部ブラウザでは対応していませんのでご注意ください。
| CSS Ver. | 適用要素 | 継承 |
|---|---|---|
| 3.0 | 全て | する |
広告
background-blend-modeの指定方法
| 構文 | |
|---|---|
|
background-blend-mode : 横位置 縦位置 [ ぼかし幅 色 ]; |
|
| プロパティ | 意味 |
| 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; | 輝度 |
|
デフォルトはブラウザにより異なります。現在使用中のブラウザのデフォルトは「タグ毎のスタイル初期 」を参照 |
|
background-blend-mode のサンプル
| 関連するCSS(STYLE) | |
|---|---|
| background | 背景全般の設定 |
| background-attachment | 背景画像のスクロール |
| background-clip | 背景画像の表示エリア |
| background-color | 背景色の設定 |
| background-image | 背景画像の設定 |
| background-origin | 背景画像の表示位置の基点 |
| background-position | 背景画像の表示位置の設定 |
| background-repeat | 背景画像の繰返し設定 |
| background-size | 背景画像の表示サイズ設定 |
| mix-blend-mode | 背景と前景要素のブレンド |
広告