CSS让视频，图片背景透明化

2024-07-11 05:52| 来源: 网络整理| 查看: 265

mix-blend-mode混合模式中有一种混合模式名为滤色，单词是screen，其有一个很有意思的特性表现，那就是黑色和其它元素进行混合的时候表现为透明。

在这里插入图片描述

Fade-in Text .figure { position: relative; height: 100vh; overflow: hidden; } .image { position: absolute; width: 100%; height: 100%; object-fit: cover; z-index: -1; transform: scale(1.8); animation: scaleImage 5s ease-out forwards; } .text { display: flex; justify-content: center; align-items: center; height: 100%; font-family: 'Roboto', Arial, sans-serif; font-size: calc(10px + 8vw); font-weight: 700; line-height: 1.2; letter-spacing: 0.05em; white-space: nowrap; text-transform: uppercase; color: #fff; background-color: #000; mix-blend-mode: multiply; opacity: 0; margin: 0; animation: fadeInText 3s 2s ease-out forwards; } @keyframes scaleImage { 100% { transform: scale(1); } } @keyframes fadeInText { 100% { opacity: 1; } }

视频也是也可以直接设置，只要把我们的视频背景色设置为黑色，同时设置如下CSS即可：

video { mix-blend-mode: screen; }

【本文地址】

公司简介

联系我们