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;	輝度
デフォルトはブラウザにより異なります。現在使用中のブラウザのデフォルトは「タグ毎のスタイル初期」を参照

ページTOP

mix-blend-mode のサンプル

mix-blend-modeの指定
ブレンド	normal multiply screen overlay darken lighten color-dodge color-burn hard-light soft-light difference exclusion hue saturation color luminosity
背景色	#ff0000

Do you like cats?

<style type="text/css">
#moveSample1Div{
  position  : relative;
  border    : 1px solid #ccc;
  padding   : 5px;
  width     : 100%;
  max-width : 310px;
  height    : 349px;
}
#overStr{
  position    : absolute;
  top         : 150px;
  left        : 30px;
  width       : 100%;
  font-size   : 36pt;
  font-weight : bold;
  line-height : 42pt;
  text-shadow : 3px 3px 0 #ccc;
  color          : rgb(255, 0, 0);
  mix-blend-mode : difference;
}
<div id="moveSample1Div">
  <div id="imgOut">
    <img src="neko1.jpg">
  </div>
  <div id="overStr">
    Do you like cats?
  </div>
</div>

2017年5月時点でIEなど一部ブラウザでは対応していませんのでご注意ください。

ページTOP

関連するCSS(STYLE)
background-blend-mode	背景をブレンド