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

友儿

发布于 2024-08-16 16:03:36

840

发布于 2024-08-16 16:03:36

文章被收录于专栏：友儿

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>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

视频