current position:Home>[untitled]

[untitled]

2022-05-15 07:31:10Twinkle, twinkle, twinkle, twinkle, twinkle, twinkle, twinkle,

mix-blend-mode css attribute :

Reference documents :https://www.zhangxinxu.com/wordpress/2019/05/css-mix-blend-mode-screen/

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>mix-blend-mode</title>
    <style>
        .friendBg{
            display: inline-block;
            width: 150px;
            height: 267px;
            background: url('./images/site-cut.jpg') 0 0 no-repeat;
            background-size: 100%;
        }
        .friendBg-video{
            display: block;
            mix-blend-mode: screen;
        }
    </style>
</head>
<body>

    <div class="friendBg">
        <video class="friendBg-video" src="./images/fire.mp4" width="150" height="267" autoplay="autoplay" preload="auto" loop="loop" webkit-playsinline="true" muted playsinline="true" x5-video-player-type="true" x5-video-orientation="portraint" x5-video-player-fullscreen="true"></video>
    </div>

    <div style="display:inline-block;width:150px;height:267px;background:url(./images/school_overcast-s.jpg);background-size:100%;"><video width="150" height="267" muted autoplay="autoplay" preload="auto" loop="loop" webkit-playsinline="true" playsinline="true" x5-video-player-type="h5" x5-video-orientation="portraint" x5-video-player-fullscreen="true" src="./images/rains-s.mp4" style="display:block;mix-blend-mode:screen;"></video></div>
</body>
</html>

Among them, we should make autoplay take effect , You have to add muted attribute

copyright notice
author[Twinkle, twinkle, twinkle, twinkle, twinkle, twinkle, twinkle, ],Please bring the original link to reprint, thank you.
https://en.chowdera.com/2022/135/202205142331201507.html

Random recommended