How to add color mask to background layer in css3

(Learning video sharing:css video tutorial)

During development, sometimes we encounter projects that require adding a color mask to the background layer , now let’s specifically summarize the method of adding color mask to the background layer.

Method 1: Overlay through positioning (note the level)

 
 
 
 .wrap1 { position: relative; width: 1200px; height: 400px; background: rgba(0, 0, 0, .5); } .wrap1 .inner { position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: url(ban8.jpg) no-repeat center center; background-size: cover; z-index: -1; }

Method 2: Overlay through pseudo-class elements

 .wrap2 { position: relative; width: 1200px; height: 400px; background: url(ban8.jpg) no-repeat center center; background-size: cover; } .wrap2::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; top: 0; background-color: rgba(0, 0, 0, .5); z-index: 2; }

Method 3: CSS3 color overlay background-blend-mode:multiply;(multiply)

 .wrap3 { position: relative; width: 1200px; height: 400px; background: url(ban8.jpg) rgba(0, 0, 0, .5) no-repeat center center; background-blend-mode: multiply; }

Expand: background blur and color Overlay

.wrap4 { position: relative; width: 1200px; height: 400px; background: url(ban8.jpg) rgba(0, 0, 0, .5) no-repeat center center; background-blend-mode: multiply; filter: blur(2px); overflow: hidden; }

For more programming-related knowledge, please visit:Introduction to Programming! !

The above is the detailed content of How to add color mask to background layer in css3. For more information, please follow other related articles on the PHP Chinese website!