幻灯片:before/:after伪元素实现前后模糊背景图求助

我在自己的幻灯片组件中已创建:before和:after伪元素，希望实现让用户能看到上一张（prev）和下一张（next）图片的效果，要求模糊（blur(10px)）区域的背景对应为前后图片。当前CSS代码如下：

.slideshow2 {
    position: relative;
}

.slideshow2 .slider {
    width: 100%;
    height: auto;
}

.slideshow2::before {
    content: "";
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    width: 6%;
    height: 100%;
    backdrop-filter: blur(10px);
    z-index: 2;
    border-right: 1.5px solid #fff;
}

.slideshow2::after {
    content: "";
    position: absolute;
    display: block;
    top: 0;
    right: 0;
    width: 6%;
    height: 100%;
    backdrop-filter: blur(10px);
    z-index: 2;
    border-left: 1.5px solid #fff;
}

核心思路 #

当前backdrop-filter仅能模糊父元素下方的内容，无法直接关联前后图片。要实现左右模糊区域对应前后图片，需将前后图片设为伪元素背景图，给背景图添加模糊效果，同时调整位置与主图对齐。

方案一：JS配合CSS变量动态更新（通用场景） #

1. 调整HTML结构

确保幻灯片容器内存在当前、上一张、下一张图片，通过类名区分：

<div class="slideshow2">
  <img src="prev.jpg" class="slide prev-slide" alt="上一张">
  <img src="current.jpg" class="slide current-slide" alt="当前">
  <img src="next.jpg" class="slide next-slide" alt="下一张">
</div>

2. 基础CSS设置

.slideshow2 {
    position: relative;
    overflow: hidden;
}

.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.current-slide {
    z-index: 1;
}

.prev-slide {
    transform: translateX(-100%);
}

.next-slide {
    transform: translateX(100%);
}

/* 左侧模糊伪元素 */
.slideshow2::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 6%;
    height: 100%;
    background: var(--prev-img) center/cover no-repeat;
    filter: blur(10px);
    z-index: 2;
    border-right: 1.5px solid #fff;
}

/* 右侧模糊伪元素 */
.slideshow2::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 6%;
    height: 100%;
    background: var(--next-img) center/cover no-repeat;
    filter: blur(10px);
    z-index: 2;
    border-left: 1.5px solid #fff;
}

3. JS动态更新背景

幻灯片切换时，更新CSS变量的值：

function updateSlideBlur(prevUrl, nextUrl) {
    const slideshow = document.querySelector('.slideshow2');
    slideshow.style.setProperty('--prev-img', `url(${prevUrl})`);
    slideshow.style.setProperty('--next-img', `url(${nextUrl})`);
}

// 示例：切换时调用
// updateSlideBlur(newPrevUrl, newNextUrl);

方案二：纯CSS实现（适用于横向平移切换的幻灯片） #

如果幻灯片是通过容器横向平移实现切换（比如所有图片在一个slider容器内排列），可直接复用容器作为伪元素背景：

.slideshow2 {
    position: relative;
    overflow: hidden;
}

.slideshow2 .slider {
    display: flex;
    width: 300%; /* 假设3张图，宽度设为300% */
    height: auto;
    transition: transform 0.3s;
}

.slideshow2 .slider img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.slideshow2::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 6%;
    height: 100%;
    background: .slider center/cover no-repeat;
    background-position: 100% 0; /* 定位到上一张图位置 */
    filter: blur(10px);
    z-index: 2;
    border-right: 1.5px solid #fff;
}

.slideshow2::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 6%;
    height: 100%;
    background: .slider center/cover no-repeat;
    background-position: -100% 0; /* 定位到下一张图位置 */
    filter: blur(10px);
    z-index: 2;
    border-left: 1.5px solid #fff;
}

这种方式下，当滑块容器通过transform: translateX()切换时，伪元素的背景会自动跟随显示对应前后图片。

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