cman.jp > WEBページ作成TOP > CSSリファレンス
WEBページ作成
広告
mix-blend-mode 「画像や文字の重ね合わせ」
mix-blend-modeは、画像と文字、画像と画像などの重ね合わせ時に色々な加工（ブレンド）を行うことができます。
2017年5月時点でIEなど一部ブラウザでは対応していませんのでご注意ください。
| CSS Ver. | 適用要素 | 継承 |
|---|---|---|
| 3.0 | 全て | する |
広告
mix-blend-modeの指定方法
| プロパティ | 意味 |
|---|---|
| mix-blend-mode: normal; | 通常の画像のまま |
| mix-blend-mode: multiply; | 掛け合わせる |
| mix-blend-mode: screen; | スクリーンを掛ける |
| mix-blend-mode: overlay; | オーバレイ（上に置く） |
| mix-blend-mode: darken; | 暗く合成する |
| mix-blend-mode: lighten; | 明るく合成する |
| mix-blend-mode: color-dodge; | ごまかし |
| mix-blend-mode: color-burn; | 焼けたように合成する |
| mix-blend-mode: hard-light; | ハードに明るく合成する |
| mix-blend-mode: soft-light; | ソフトに明るく合成する |
| mix-blend-mode: difference; | 相違で合成する |
| mix-blend-mode: exclusion; | 除外 |
| mix-blend-mode: hue; | 色相 |
| mix-blend-mode: saturation; | 彩度 |
| mix-blend-mode: color; | カラー |
| mix-blend-mode: luminosity; | 輝度 |
|
デフォルトはブラウザにより異なります。現在使用中のブラウザのデフォルトは「タグ毎のスタイル初期 」を参照 |
|
mix-blend-mode のサンプル
| mix-blend-modeの指定 | |
|---|---|
| ブレンド | |
| 背景色 |
#ff0000
|
Do you like cats?
2017年5月時点でIEなど一部ブラウザでは対応していませんのでご注意ください。
ページTOP| 関連するCSS(STYLE) | |
|---|---|
| background-blend-mode | 背景をブレンド |
広告