css 混合模式
2020-10-15 本文已影响0人
skoll
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div
style="
background: url('./rains.jpg');
background-size: 100%;
display: inline-block;
width: 150px;
height: 200px;
">
<!-- 想要覆盖的图片样式：底色是黑色的图片 -->
<!-- <img
src="./landscape-s.jpg"
style="display: block;
mix-blend-mode: screen;"
alt=""> -->
<!-- 底片 -->
</div>
<div style="display:inline-block;width:150px;height:267px;background:url('./landscape-s.jpg');background-size:100%;">
<!-- 这次是照片在外面 -->
<video controls width="150" height="267" autoplay="" preload="auto" loop="" webkit-playsinline="true" playsinline="true" x5-video-player-type="h5" x5-video-orientation="portraint" x5-video-player-fullscreen="true" src="https://image.zhangxinxu.com/video/blog/201905/fire.mp4" style="display:block;mix-blend-mode:screen;">
</video>
<!-- 混合模式加给视频元素 -->
</div>
</body>
</html>
