黑色背景视频和白色背景图片变透明的方法

2024年5月20日 200次阅读 来源: weixin_43795169

css 的 mix-blend-mode 属性

例1： mix-blend-mode:screen 滤色

<div>
	<div class="bg"></div>
	<video src="../../../2.mp4" autoplay="autoplay" muted="muted" />   
	<!--2.mp4是一个黑色背景的动画，想让它以透明的方式覆盖在.bg的背景上面-->	
</div>

<style>
	.bg{
		width: 750px;	height: 100%; background: pink;
		position: fixed; left: 0;
	}
	video{
		width: 750px;
		position: fixed; left: 0;
		mix-blend-mode:screen;   
	}
</style>

例2 mix-blend-mode:multiply 正片叠底

<div class="bg"></div>
<img src="@/assets/images/1.png">
<!--1.png是一个白色背景图片，想让它以透明的方式覆盖在.bg的背景上面-->

<style>
	.bg{
		width: 750px; height: 100%; background: pink;
		position: fixed; left: 0;
	}
	img{
		width: 100%;
		position: fixed; 	left: 0;	
		mix-blend-mode : multiply; 
	}
</style>
    原文作者：weixin_43795169
    原文地址: https://blog.csdn.net/weixin_43795169/article/details/104796171
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞