CSS background-blend-mode プロパティ
例
ブレンドモード:
div {
width: 290px;
height: 69px;
background-size: 290px 69px;
background-repeat:no-repeat;
background-image: linear-gradient(to right, green 0%, white 100%), url('logo.png');
background-blend-mode: color-dodge;
}
width: 290px;
height: 69px;
background-size: 290px 69px;
background-repeat:no-repeat;
background-image: linear-gradient(to right, green 0%, white 100%), url('logo.png');
background-blend-mode: color-dodge;
}
試してみる »
定義と使い方
background-blend-mode プロパティは、背景レイヤーのブレンドモード（画像と色）を定義します。
| デフォルト値: | normal |
|---|---|
| Inherited: | no |
| Animatable: | no. 表示animatable |
| バージョン: | CSS3 |
| JavaScript 構文: | object.style.backgroundBlendMode="screen" |
ブラウザサポート
表内の数字は、そのプロパティをサポートする最初のブラウザのバージョン番号を示します。
| プロパティ | |||||
|---|---|---|---|---|---|
| background-blend-mode | 35.0 | 非対応 | 30.0 | 7.1 | 22.0 |
CSS 構文
background-blend-mode: normal|multiply|screen|overlay|darken|lighten|color-dodge|saturation|color|luminosity;
プロパティ値
| 值 | 説明 | 例 |
|---|---|---|
| normal | デフォルト値。通常のブレンドモードを設定します。 | 試してみる » |
| multiply | 乗算モード。 | 試してみる » |
| screen | スクリーンモード。 | 試してみる » |
| overlay | オーバーレイモード。 | 試してみる » |
| darken | ダークンモード。 | 試してみる » |
| lighten | ライトンモード。 | 試してみる » |
| color-dodge | 覆い焼きカラーモード。 | 試してみる » |
| saturation | 彩度モード。 | 試してみる » |
| color | カラーモード。 | 試してみる » |
| luminosity | 輝度モード。 | 試してみる » |
関連記事
CSS チュートリアル:CSS 背景
その他の拡張