视频中间的文字竟然还能这样玩？CSS 色彩差值混合技巧

Author：友儿
发布时间：August 15, 2024
409 views
No comments
1093 words
Categories：学习笔记前端

mix-blend-mode: difference（差值混合模式）知识点

差值混合模式会计算每个像素的颜色值与底层颜色值之间的差值，并使用该差值作为结果颜色。
它可以创造出独特的视觉效果，常常用于产生特殊的色彩对比和艺术效果。
在一些设计场景中，可以通过它来突出特定元素或创造独特的视觉氛围。
可能会对整体画面的色调和对比度产生显著影响。
与其他混合模式结合使用，可以实现更加丰富多样的视觉表现。

效果展示

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>色彩的差值混合</title>
    <style>
        .container {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }

        .video-with-text {
            position: relative;
        }

        .video-with-text p {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            padding: 10px;
            background-color: rgba(0, 0, 0, 0.5);
            color: #e5e7ef;
            font-size: 20px;
            text-align: center;
            mix-blend-mode: difference;
        }
    </style>
</head>

<body>
<div class="container">
    <div class="video-with-text">
        <video width="800" height="500" controls>
            <source src="uwas.mp4" type="video/mp4">
        </video>
        <p>这是视频中间的文字</p>
    </div>
</div>
</body>

</html>