问题描述
<main>
<div class="container">
<video
src="./pexels-tima-miroshnichenko-5377684.mp4"
autoplay
muted
loop
></video>
<h2>Hello There!</h2>
</div>
</main>
main {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.container {
width: 60%;
height: fit-content;
overflow: hidden;
display: grid;
}
video,h2 {
grid-column: 1;
grid-row: 1;
width: 100%;
display: inline;
}
.container h2 {
margin: 0;
height: 100%;
background: #ffdb99;
font-size: 13vw;
padding: 0;
color: #fff;
text-align: center;
text-transform: uppercase;
z-index: 2;
mix-blend-mode: screen;
font-family: 'Poppins',sans-serif;
}
结果如下: image of text/video overlay
我需要背景保持不透明,但文本对后面的视频要透明!
感谢您提前提供意见! 希望我的问题很清楚!
解决方法
此解决方案不适用于视频,但取决于您的视频,您是否可以使用 GIF?
如果这对您有用,那么您可以制作 GIF 或图像作为 h2
的背景,并使用 -webkit
使文本透明。
main {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.container {
/* Put your solid colour background for your div */
background: #ffdb99;
width: 60%;
height: fit-content;
overflow: hidden;
display: grid;
}
.container h2 {
/* This makes the text transparent */
color: white; /* incase the transparency doesn't work */
background: url("https://media.giphy.com/media/115BJle6N2Av0A/giphy.gif") no-repeat;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-size: cover;
margin: 0;
font-size: 13vw;
padding: 0;
text-align: center;
text-transform: uppercase;
font-family: 'Poppins',sans-serif;
}
<main>
<div class="container">
<h2>Hello There!</h2>
</div>
</main>
我不知道如何使用 mix-blend-mode 来做到这一点,因为在正常的 CSS 意义上,您不能将视频作为背景。
但是您可以通过在背景中“切割文本孔”并使用 SVG 蒙版将整个内容覆盖在视频上来实现效果。
这是一个示例,您可以选择颜色,因为它不受任何混合或遮罩的影响:
* {
margin: 0;
padding: 0;
}
video {
width: 100%;
height: auto;
z-index: -1;
position: relative;
top: 50%;
transform: translateY(-50%);
}
svg {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
text {
font-size: 10vmin;
text-anchor: middle;
font-family: sans-serif;
}
<video src="https://www.w3schools.com/html/mov_bbb.mp4" autoplay muted loop></video>
<svg width="33vw" height="33vh">
<mask id="mask" height="100%" width="100%">
<rect x="0" y="0" width="100%" height="100%" fill="#fff"></rect>
<text>
<tspan x="50%" dy="1.2em">HELLO</tspan>
<tspan x="47%" dy="1em">THERE!</tspan>
</text>
</mask>
<rect width="100%" height="100%" mask="url(#mask)" fill="#ffdb99"></rect>
</svg>