如何实现HTML文本背景透明但文字不透明 适配导航栏模糊背景场景

核心问题排查与修复 #

• 你当前实现背景透明、文字不透明的写法是正确的：使用rgba()设置导航栏背景色，没有使用opacity属性，不会导致子元素文字继承透明效果。
• 文本区域无模糊背景的问题，按以下步骤修复：
  1. 给nav添加高优先级层级，避免被下层元素遮挡导致模糊失效：在nav的CSS规则中添加z-index: 999;
  2. 兼容低版本webkit内核浏览器，补充前缀属性，把原有backdrop-filter: blur(8px);替换为两行：

     -webkit-backdrop-filter: blur(8px);
     backdrop-filter: blur(8px);
     

  3. 适当调低导航栏背景透明度，避免深色半透明背景遮挡模糊效果，可将background-color: rgba(0,0,0,0.6);调整为background-color: rgba(0,0,0,0.45);
  4. 如果需要每个导航文本区域都有独立的模糊效果，可以给链接增加对应样式：

     li a {
       margin-left: 40px;
       padding: 8px 16px;
       border-radius: 4px;
       background-color: rgba(255,255,255,0.1);
       -webkit-backdrop-filter: blur(8px);
       backdrop-filter: blur(8px);
     }
     

其他代码错误修复 #

当前HTML中所有<a>标签的跳转属性拼写错误，把herf修正为href即可正常跳转。

补充优化建议 #

给页面body添加上内边距，避免页面顶部内容被固定定位的导航栏遮挡：

body {
  padding-top: 70px;
}

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