mix-blend-mode

 <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box-wrap {
        position: relative;
        width: 80px;
        height: 80px;
 
        .box1,
        .box2 {
          position: absolute;
          inset: 0;
          width: 100%;
          height: 100%;
        }
        .box1 {
          background-color: rgba(255, 0, 0, 1);
        }
        .box2 {
          top: 20px;
          left: 20px;
          background-color: rgba(0, 0, 255, 1);
          mix-blend-mode: screen;
        }
      }
 
      .box2-wrap {
        position: relative;
        left: 120px;
        width: 200px;
 
        .bg,
        .video {
          position: absolute;
          inset: 0;
          width: 100%;
        }
        .video {
          mix-blend-mode: screen;
        }
      }
 
      .bg,
      .video,
      .canvas {
        width: 200px;
        height: auto;
        object-fit: contain;
        box-sizing: border-box;
      }
    </style>
  </head>
  <body>
    <div class="box-wrap">
      <div class="box1"></div>
      <div class="box2"></div>
    </div>
    <hr />
    <div class="box2-wrap">
      <img src="./school_overcast-s.jpg" alt="" class="bg" />
      <video src="./rains-s.mp4" controls autoplay loop muted class="video"></video>
    </div>
  </body>
</html>

posted @ 2024-05-06 20:12 _clai 阅读(9) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· webcodecs mix-blend-mode

· canvas圆形裁切

· CSS 混合模式：mix-blend-mode: difference

· css的mix-blend-mode属性生成水印效果，不影响文本及点击事件

· mix-blend-mode和background-blend-mode应用场景

阅读排行：
· Manus爆火，是硬核还是营销？
· 终于写完轮子一部分：tcp代理了，记录一下
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了

公告

昵称： _clai
园龄： 4年11个月
粉丝： 0
关注： 7

+加关注

2025年3月

日

一

二

三

四

五

六

随笔分类

随笔档案

阅读排行榜

评论排行榜

1. uniapp 文件管理器(文件选择)(4)

_clai

mix-blend-mode

mix-blend-mode

公告

搜索

常用链接

最新随笔

随笔分类

随笔档案

阅读排行榜

评论排行榜

最新评论

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Document</title>
	<style>
	.box-wrap {
	position: relative;
	width: 80px;
	height: 80px;

	.box1,
	.box2 {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	}
	.box1 {
	background-color: rgba(255, 0, 0, 1);
	}
	.box2 {
	top: 20px;
	left: 20px;
	background-color: rgba(0, 0, 255, 1);
	mix-blend-mode: screen;
	}
	}

	.box2-wrap {
	position: relative;
	left: 120px;
	width: 200px;

	.bg,
	.video {
	position: absolute;
	inset: 0;
	width: 100%;
	}
	.video {
	mix-blend-mode: screen;
	}
	}

	.bg,
	.video,
	.canvas {
	width: 200px;
	height: auto;
	object-fit: contain;
	box-sizing: border-box;
	}
	</style>
	</head>
	<body>
	<div class="box-wrap">
	<div class="box1"></div>
	<div class="box2"></div>
	</div>
	<hr />
	<div class="box2-wrap">
	<img src="./school_overcast-s.jpg" alt="" class="bg" />
	<video src="./rains-s.mp4" controls autoplay loop muted class="video"></video>
	</div>
	</body>
	</html>