如何用CSS实现文字镂空，让底层视频透过文字显示？

要同时保留hover交互和文字镂空透出视频的效果，我们可以通过调整元素层级和CSS的background-clip: text属性实现，以下是修改后的完整代码：

修改后的HTML代码 #

<div class="container">
  <div class="box1">镂空文字效果</div>
  <div class="box2"></div>
</div>

<video autoplay muted loop 
       src="car.mp4" 
       class="bg-video">
</video>

修改后的CSS代码 #

/* 视频作为全屏背景，置于最底层 */
.bg-video {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
}

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  position: relative;
  width: 100%;
  padding: 0;
  margin: 0;
}

.box1 {
  position: relative;
  z-index: 2;
  font-size: 86px;
  font-weight: bold;
  text-align: center;
  /* 核心：文字镂空，透出底层视频 */
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.box2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: white;
  z-index: 1;
  transition: opacity 0.3s ease;
}

.box1:hover ~ .box2 {
  opacity: 0.5;
}

关键修改说明 #

1. 视频层级调整：将视频设为position: fixed和z-index: -1，作为全屏背景置于所有元素下方，object-fit: cover保证视频按比例铺满屏幕。
2. 文字镂空实现：给box1添加background-clip: text和color: transparent，让文字区域透明，直接透出下方视频；同时提升box1层级（z-index:2），确保它在box2之上。
3. 保留hover交互：box2层级设为1（低于box1、高于视频），默认完全不透明，hover时通过opacity:0.5变为半透明，添加transition让透明度变化更流畅。
4. 容器定位修正：将容器改为position: relative，让内部的box2绝对定位基于容器，避免布局偏移。

内容的提问来源于stack exchange，提问作者Piers Ovenden