Home > Article > Web Front-end > How to use CSS background-blend-mode property?
How to use CSS background-blend-mode property?
- 青灯夜游Original
- 2019-02-20 11:11:593372browse
CSS background-blend-mode property is used to define the blending mode of the background layer. Its syntax is "background-blend-mode: normal|multiply|screen|overlay|darken|lighten...".
Recommended: "css tutorial"
background-blend-mode attribute is used to define the background layer Blending mode (picture and color), the modes that can be set are: Multiply mode, Screen mode, Overlay mode, Darken mode, Lighten mode, Color Dodge mode, Saturation mode, Color mode, Brightness mode.
CSS background-blend-mode property
Function: Used to define the blending mode (image and color) of the background layer
Syntax:
background-blend-mode: normal|multiply|screen|overlay|darken|lighten|color-dodge|saturation|color|luminosity;
Attribute value:
normal: Default value, sets the normal blending mode.
multiply: Multiply mode.
screen: color filter mode.
overlay: Overlay mode.
darken: darkening mode.
lighten: Brightening mode.
color-dodge: Color dodge mode.
saturation: Saturation mode.
color: color mode.
luminosity: brightness mode.
Note: Internet Explorer does not support the background-blend-mode attribute.
Usage example of CSS background-blend-mode property
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
body {background-color: yellow;}
div {
width: 290px;
height: 69px;
background-size: 290px 69px;
background-repeat:no-repeat;
background-image: linear-gradient(to right, #25a1b1 50%,#862e3e 100%), url('https://img.php.cn/upload/article/000/000/024/5c6a4428ea867709.png');
background-blend-mode: color-dodge;
}
</style>
</head>
<body>
<div></div>
</body>
</html>Rendering:
The above is the entire content of this article, I hope it will be helpful to everyone's study.
The above is the detailed content of How to use CSS background-blend-mode property?. For more information, please follow other related articles on the PHP Chinese website!