CSS - background-blend-mode

トップ > CSSリファレンス > background-blend-mode

概要

属性名 background-blend-mode
blend-mode, ...
値の詳細 blend-mode = normal | multiply | screen | overlay | darken | lighten |
  color-dodge | color-burn | hard-lignt | soft-light | difference |
  exclutsion | hue | saturation | color | luminosity
初期値normal
適用可能要素全ての要素
継承継承しない
メディアVisual
サポートC2 / Fx30 / Ch35 / Op22 / Sa7.1

説明

background-image などによる背景と、さらにその下側にある背景が重なる部分の、色のブレンド方式を指定します。複数指定する場合は、background-image と同じように指定します。

説明
normalブレンドしません。要素の色をそのまま表示します。
multiply背景色と要素の色を掛け合わせた色にします。
screen背景色の補色と、要素の色の補色を掛け合わせた色の補色を取ります。
overlay背景色に応じて、multiply または screen されます。
darken背景色と要素色の暗い方の色にします。
lighten背景色と要素色の明るい方の色にします。
color-dodge要素色を反映して背景色を明るくします。
color-burn要素色を反映して背景色を暗くします。
hard-lignt要素色に応じて、multiply または screen されます。背景に強いスポットライトを当てた具合になります。
soft-light要素色に応じて、darken または lighten されます。背景に拡散スポットライトを当てた具合になります。
difference背景色と要素色の差の絶対値とします。
exclutsiondifference と同様ですが、コントラストが弱くなります。
hue要素色の色相と、背景色の彩度と光度を合わせた色にします。
saturation要素色の彩度と、背景色の色相と光度を合わせた色にします。
color要素色の色相と彩度と、背景色の光度を合わせた色にします。
luminosity要素色の光度と、背景色の色相と彩度を合わせた色にします。

詳細は下記を参照ください。

使用例

CSS
body {
  background-color: green;
}
div {
  width: 200px;
  height: 200px;
  background-size: 200px 200px;
  background-repeat:no-repeat;
  background-image: linear-gradient(to right, #000000 0%,#ffffff 100%), url('ducky.png');
  background-blend-mode: difference, normal;
}
HTML
<body>
   <div></div>
</body>

関連項目

mix-blend-mode, background-blend-mode, isolation

リンク


Copyright (C) 2015 杜甫々
初版:2015年11月8日、最終更新:2015年11月8日
http://www.tohoho-web.com/css/prop/mix-blend-mode.htm