实现文本在半透明容器后方滑动时的模糊效果

我明白你想要实现的效果——当页面文本在左右两侧的半透明导航标签后方滑动时，标签覆盖区域内的文本呈现模糊效果对吧？你尝试了backdrop-filter和filter但没达到预期，问题主要出在元素层级结构和backdrop-filter的作用逻辑上，咱们来一步步修复这个问题：

问题根源 #

backdrop-filter的作用是模糊当前元素后方的背景内容，但你原来的DOM结构中，文本<span>和导航<label>是同级元素，即便label是绝对定位，它们同属#pages容器下的平级节点，backdrop-filter无法正确捕捉到后方的文本内容。咱们需要调整结构，让文本容器处于label的下方，确保label能“覆盖”在文本上方，这样backdrop-filter才能生效。

修改后的完整代码 #

HTML #

<div id="pages-container">
  <div id="pages-content">
    <span>Page 1</span><span>Page 2</span><span>Page 3</span>
  </div>
  <input id="previous" onchange="previous()" type="checkbox">
  <label class="hidden" for="previous" id="label-previous">&lt;</label>
  <input id="next" onchange="next()" type="checkbox">
  <label for="next" id="label-next">&gt;</label>
</div>

CSS #

body, html {
  height: 100%;
}
body {
  background-color: #222;
  overflow: hidden;
  margin: 0;
  user-select: none;
  white-space: nowrap;
}

#pages-container {
  position: relative;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

#pages-content {
  height: 100%;
  width: 300%; /* 对应3个页面，宽度设为300% */
  transition: margin-left 1s linear;
}

#pages-content.page2 {
  margin-left: -100%;
}
#pages-content.page3 {
  margin-left: -200%;
}

span {
  color: #ccc;
  display: inline-block;
  font-family: consolas;
  font-size: 2em;
  width: 100%;
  height: 100%;
  line-height: 100vh;
  text-align: center;
}

input[type=checkbox] {
  display: none;
}

label {
  backdrop-filter: blur(3px); /* 核心：启用背景模糊 */
  background-color: rgba(255, 255, 255, 0.1);
  color: #ccc;
  font-family: consolas;
  font-size: 5em;
  height: 100%;
  line-height: 100vh;
  opacity: 1;
  pointer-events: initial;
  position: absolute;
  top: 0;
  text-align: center;
  vertical-align: middle;
  width: 200px;
  z-index: 10; /* 确保label在文本上方 */
  transition: background-color 0.1s linear, color 0.1s linear, opacity 0.8s 0.2s linear;
}

#label-previous {
  left: 0px;
}
#label-next {
  left: calc(100% - 200px);
}

label.clicked {
  background-color: rgba(255, 255, 255, 0.2);
  color: #fff;
}

label.hidden {
  opacity: 0;
  pointer-events: none;
}

JavaScript #

var page = 1;
var pages = 3;
function previous() {
 document.getElementById('label-previous').classList.add('clicked');
 document.getElementById('pages-content').classList.remove('page' + page);
 if ( page == pages ) {
  document.getElementById('label-next').classList.remove('hidden');
 }
 page--;
 if ( page == 1 ) {
  document.getElementById('label-previous').classList.add('hidden');
 }
 setTimeout(function() {
  document.getElementById('label-previous').classList.remove('clicked');
 }, 100);
}
function next() {
 document.getElementById('label-next').classList.add('clicked');
 document.getElementById('pages-content').classList.add('page' + (page + 1));
 if ( page == 1 ) {
  document.getElementById('label-previous').classList.remove('hidden');
 }
 page++;
 if ( page == pages ) {
  document.getElementById('label-next').classList.add('hidden');
 }
 setTimeout(function() {
  document.getElementById('label-next').classList.remove('clicked');
 }, 100);
}

关键修改说明 #

• 结构调整：新增#pages-container作为父容器，把文本放在#pages-content里，导航label作为容器的子元素绝对定位在上方，确保label在文本的堆叠层级之上。
• 启用backdrop-filter：直接在label上添加backdrop-filter: blur(3px)，现在因为label覆盖在文本上方，后方的文本会被模糊处理。
• 文本容器宽度调整：把#pages-content宽度设为300%（对应3个页面），每个span占100%宽度，滑动逻辑更清晰。
• 层级控制：给label设置z-index:10，确保它始终在文本上方，不会被文本遮挡。

这样修改后，当你点击前后按钮滑动页面时，文本经过左右标签区域时就会呈现模糊效果啦！

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