1. How to make the video background transparent
During Web development, some interactive special effects are more complicated and you want to use video to achieve, but there is a problem with the background color of the video. It cannot be transparent. As a result, designers must blend with the background when making videos. The development cost is still quite high, and maintenance is a headache. Is there any good way to make the background color of MP4 video transparent?
Have!
We can save the country with CSS mix-blend-mode attribute curve.
mix-blend-modeOne of the blending modes is called Color Filter. The word is screen, it has a very interesting characteristic, that is, when black is mixed with other elements, it appears transparent.
So we want to achieve a video background color transparent effect is very simple, as long as our video background color is set to black, and at the same time set the following CSS:
video {
mix-blend-mode: screen;
}
E.g:
Here is a base map:
Then there is a raining video (please click if not playing):
At this point, we overlay the video on top of the plain image, and set the video's blending mode to screen, you can see that the video background has become transparent, and the dynamic effect of rain is well presented on the bottom image, as shown below Show (click if not playing) (real-time rendering, effect under non-IE browser):
It's that simple!
It can be used in all projects that do not need to be compatible with IE browser.
I believe you must have learned this skill TIPS!
2. Conclusion
For an in-depth understanding of the filter screen, you can refer to this article: "In- depth understanding of CSS mix-blend-mode filter screen blending mode ".
Preview, the articles will be updated in the next two weeks, please be prepared!