CSSのbackground-ブレンドモードプロパティ
例
混在モード:
div要素 {
幅:290px;
高さ:69px;
背景サイズ:290px 69px;
背景リピート:なしリピート;
背景画像:リニアグラジエント(右、緑0%、白100%まで)は、url( 'logo.png');
背景ブレンドモード:色-かわします。
}
幅:290px;
高さ:69px;
背景サイズ:290px 69px;
背景リピート:なしリピート;
背景画像:リニアグラジエント(右、緑0%、白100%まで)は、url( 'logo.png');
背景ブレンドモード:色-かわします。
}
»をお試しください
定義と使用法
背景ブレンドモード属性は、背景レイヤー(画像色)のブレンドモードを定義します。
デフォルト: | ノーマル |
---|---|
継承: | いいえ |
アニメーション: | いいえ。 アニメートを参照してください。 |
バージョン: | CSS3 |
JavaScriptシンタックス: | オブジェクト.style.backgroundBlendModeは= "画面" |
ブラウザのサポート
表中の数字は、プロパティバージョン番号をサポートする最初のブラウザを表します。
プロパティ | |||||
---|---|---|---|---|---|
背景ブレンドモード | 35.0 | サポートしていません。 | 30.0 | 7.1 | 22.0 |
CSSの構文
background-blend-mode: normal|multiply|screen|overlay|darken|lighten|color-dodge|saturation|color|luminosity;
プロパティ値
値 | 説明 | 例 |
---|---|---|
ノーマル | デフォルト。 通常のブレンドモードを設定します。 | »をお試しください |
掛けます | 乗算モード。 | »をお試しください |
画面 | カラーモード。 | »をお試しください |
オーバーレイ | オーバーレイモード。 | »をお試しください |
暗くします | ディマーモード。 | »をお試しください |
明るくします | モードを明るく。 | »をお試しください |
カラーかわします | 覆い焼きカラーモード。 | »をお試しください |
飽和 | 飽和モード。 | »をお試しください |
カラー | カラーモード。 | »をお試しください |
光度 | 明るモード。 | »をお試しください |
関連記事
CSSチュートリアル: CSSの背景