javascript - 如何使用 css 模糊图像 <img> 标签的一部分，我没有使用背景图像的选项

Question

我想使图像的某些部分模糊。

   li.slide:before {
     content: "";
     width: 25%;
     position: absolute;
     height: 100%;
     backdrop-filter: blur(25px);
     left: 0;
    }

    li.slide:after {
     content: "";
     width: 25%;
     position: absolute;
     height: 100%;
     backdrop-filter: blur(25px);
     right: 0;
    }

这段代码在 chrome 中使图像模糊，由于 firefox 不支持背景滤镜，我如何在 firefox 中实现相同的效果？

<div class="carousel carousel-slider">
    <button type="button" class="control-arrow control-prev control- 
    disabled" style="display: none;"></button>
    <div class="slider-wrapper axis-horizontal">
        <ul class="slider animated" style="transform: translate3d(0%, 
        0px, 
        0px); transition-duration: 350ms;">
            <li class="slide selected"><img src="../../slide1.jpg" /> . 
            </li>
            <li class="slide"><img src="../../slide2.jpg" /></li>
        </ul>
    </div>
    <button type="button" class="control-arrow control-next"></button>
</div>

Answer 1

blur() CSS 函数对输入图像应用高斯模糊。它的结果是一个。

filter: blur(4px);

链接:https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/blur