search

Home >Web Front-end >CSS Tutorial >How to use CSS background-blend-mode property?

How to use CSS background-blend-mode property?

青灯夜游
青灯夜游Original
2019-02-20 11:11:593459browse

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...".

How to use CSS background-blend-mode property?

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(&#39;https://img.php.cn/upload/article/000/000/024/5c6a4428ea867709.png&#39;);
  background-blend-mode: color-dodge;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

Rendering:

How to use CSS background-blend-mode property?

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!

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：How to use !important rules in CSS? (code example)Next article：How to use !important rules in CSS? (code example)

Related articles

See more