By zhangxinxu from www.zhangxinxu.com/wordpress/?… This article can be reproduced in full, personal website without authorization, but need to retain the original author, source and link in the article, any website can be summary aggregation, commercial please contact authorization.

1. Method of video background transparency

In the Web development, some interaction effects is more complex, want to use the video, but there is a problem is the background color of video, it can’t be transparent, lead to the designer at the time of making video must together with background, the development cost is high, and more headaches, to maintain that is there any good way, MP4 Video Background color becomes transparent.

There are!

We can save the country by using CSS mix-Blending-mode blending mode property curves.

One of the mix-blending-mode blending modes is called screen, which has an interesting feature: black appears transparent when mixed with other elements.

So we want to achieve a video background color transparent effect is very simple, just set our video background color to black, and set the following CSS:

video {
    mix-blend-mode: screen;
}Copy the code

Such as:

Here is a base image:

Then there’s a video of rain (click if it doesn’t play) :

At this point, we overlay the video on top of the prime image and set the video’s blend mode to Screen, then we can see that the video background becomes transparent and the dynamic effect of rain is well presented on the bottom image, as shown below (if it is not played, please click) (real-time rendering, the effect is available in non-IE browser) :

It’s that simple!

It is available in all projects that do not require Internet Explorer compatibility.

You must have learned this skill TIPS!

Second, the epilogue

For an in-depth understanding of color screens, see this article (still in writing, to be released this weekend).

Be prepared for more articles in the next two weeks! 😊

CSS World
Click to display the purchase code

// Want a tip? Click here. Got something to say? Click here.