半透明导航栏文字实现页面背景穿透的CSS问题求助

我懂你的需求——你想让导航栏上的文字变成“镂空”效果，让页面body的背景能透过文字显示出来，但现在把文字设为完全透明后，看到的却是导航栏自身的半黑色背景，而不是body的橙棕色。这是因为文字透明后，下方的层级是导航栏的背景，而非body的背景，咱们来调整CSS解决这个问题。

问题根源 #

你之前设置color: #ffffff00只是让文字颜色透明，但文字元素本身还是叠加在导航栏的半透明黑色背景之上，所以透过文字看到的是导航栏的背景色，不是body的背景。要实现“文字镂空显示底层背景”，需要用到CSS的background-clip: text属性。

解决方案代码 #

修改你的CSS，针对导航栏里的文字元素（<p>和<li>）设置镂空效果：

body { background: #db8669; }
.header { 
  z-index: 99; 
  position: fixed; 
  width: 100%; 
  height: 3rem; 
  background-color: #00000077; /* 保留导航栏半透明黑色背景 */
  font-family: 'Encode Sans Expanded', sans-serif; 
  text-align: center; 
}

/* 核心：给文字元素设置镂空效果 */
.header p, .header li {
  background-color: #db8669; /* 和body背景色完全一致 */
  background-clip: text; /* 让背景只显示在文字区域 */
  -webkit-background-clip: text; /* 兼容Chrome、Safari等webkit内核浏览器 */
  color: transparent; /* 文字透明，露出下方的背景色 */
}

/* hover时恢复正常文字颜色，取消镂空 */
.header:hover p, .header:hover li {
  color: #ffffffdd;
  background-color: transparent;
  background-clip: border-box; /* 恢复默认背景裁剪规则 */
}

.header li:hover { 
  color: #ddffee; 
  cursor: pointer; 
}

/* 以下是你原有的其他样式，保持不变 */
.header li { 
  display: inline; 
  list-style-type: none; 
  font-size: .75rem; 
}
.header li:last-child { margin-right: 0; }
.header ul { height: 3rem; float: right; display: inline-block; }
.header p { font-family: 'Pacifico', cursive; font-size: 1rem; display: inline-block; float: left; margin-top: .3rem; margin-left: .3rem; height: 3rem; }
.header .toolbar { width: 100%; display: inline-block; }
.header nav { margin-right: 1rem; }

原理说明 #

• background-clip: text会将元素的背景限制在文字的轮廓内，相当于给文字“填充”背景色。
• 我们把文字元素的背景色设为和body完全一样的#db8669，再将文字颜色设为transparent，这样看起来就像是文字镂空，直接显示body的背景了。
• 导航栏自身的半透明黑色背景依然存在，所以文字周围的区域还是原来的半透明效果，完美符合你的需求。

你可以直接替换原CSS试试，应该就能达到你想要的效果啦！

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