background-blend-mode - 背景色と背景画像をブレンドする
投稿日: / 更新日:
スタイルシートのbackground-blend-modeは、背景画像と背景色をブレンドするためのプロパティです。
サンプルコード
background-blend-modeを指定した例です。指定を有効にするには、背景画像と背景色の両方を指定しておかなければいけません。
body {
background-blend-mode: screen ;
background-image: url( "/character.png" ) ;
background-color: #D36015 ;
}デモ
下記は、背景画像に白黒の模様、背景色に茶色(#D36015)を指定した上で、background-blend-modeの値にscreenを指定した例です。
値の指定
値の指定方法は主に下記の通りです。リンクをクリックすると、デモを確認できます。それぞれのキーワードがもたらす結果の説明ですが、色の知識が不足しているため、感覚での表現になってしまうことをご容赦下さい。デモで確認していただければ幸いです。
| 項目 | 説明 |
|---|---|
| inherit | 親要素の値を引き継ぐ。例の場合、div要素のbackground-blend-modeには、bodyに指定された値(screen)が引き継がれる。 |
| initial | プロパティの初期値が適用される。この場合、normalが適用されて、ブレンドされない。 |
| normal | 初期値。背景画像と背景色は、ブレンドされない。 |
| multiply | 深く、暗くブレンドされる。 |
| screen | 白く、薄くブレンドされる。 |
| overlay | 画像の明るさ、暗さが強調される。 |
| darken | 背景画像の各色は、背景色より濃くない場合、背景色に塗りつぶされてしまう。 |
| lighten | 背景画像の各色は、背景色より明るくない場合、背景色に塗りつぶされてしまう。 |
| color-dodge | 背景画像の色が反転する。 |
| color-burn | 赤っぽくブレンドされている、ように見える…(汗)。 |
| hard-light | 明るさを強めに強調したブレンド。 |
| soft-light | 明るさを弱めに強調したブレンド。 |
| difference | コントラストが強めにきいたブレンド。 |
| exclusion | コントラストが弱めにきいたブレンド。 |
| hue | 輝度と彩度をブレンド。 |
| saturation | 彩度を保ってブレンド。 |
| luminosity | 輝度を保ってブレンド。 |
| color | 背景画像の彩度と、背景色の輝度を保ったブレンド。 |
ブラウザのサポート
2016年7月現在の、ブラウザのサポート状況は次の通りです。
Chrome
●
35+
2014年5月
Firefox
●
30+
2014年6月
Safari
▲
9.1+
時期不明
Ie
×
11+
2013年10月
Edge
×
14+
2016年2月
Opera
●
22+
2014年6月
Safari(iOS)
▲
9.3+
時期不明
Ie Mobile
×
11+
2014年7月
Chrome
●
47+
2015年12月
Android
●
47+
時期不明
FF Mobile
●
44+
2016年1月
Opera Mobile
▲
33+
2015年10月