Javascript 使用CSS去除模糊图像外部的白色薄雾

好的，我有一个图像，它是模糊的，并且在加载dom时不模糊

<div class="image-wrapper-container2"><div class="image-wrapper orig" style="background-image: url('https://www.w3schools.com/css/img_fjords.jpg'); background-size: cover; background-position: bottom; background-color: #a5a0a5; filter: blur(15px);"></div></div>

但问题是，图像的外部有一层白色的薄雾

演示正在发生的事情

如你所见，我试图通过使用

width:110%来消除烟雾；左边缘：-5%；身高：110%；利润率最高：-5%用于第二个图像。但这不是正确的解决方案

一旦加载dom并且图像被清除，图像就在div之外5%

是否有任何方法可以使图像边缘周围的图像模糊消失，而不使图像超出
image-wrapper-container2
div元素的边界

干杯
在
过滤器：模糊
规则中，似乎没有办法删除元素周围的模糊边缘。我会建议一个简单的技巧：

创建两个包含相同图像的重叠div，第一个包含带有图像的
img
元素，第二个作为空div，具有相同的图像作为背景
在高级div中，将图像插入一个更大的包装中，在其周围创建一个边框的效果，边框的厚度足以容纳模糊的边缘。然后对整个包装应用
过滤器：blur
，使模糊的边缘与假边界相匹配；然后，通过
overflow:hidden
调整要显示的图像的尺寸
通过JavaScript，只需在加载时隐藏上级div

setTimeout（函数（）{
$（'.fake image'）.hide（）；
}, 2000);
。假图像{
溢出：隐藏；
宽度：560px；
高度：360px；
保证金：0自动；
位置：绝对位置；
顶部：10px；
左：50px；
z指数：10；
}
.容器备份{
宽度：680px；
高度：480px；
背景色：rgba（255255,0）；
滤镜：模糊（15px）；
左边距：-60px；
利润上限：-60px；
}
.图像顶部img{
填充：40px；
显示：块；
}
.真实bck图像{
位置：绝对位置；
顶部：10px；
左：50px；
溢出：隐藏；
宽度：560px；
高度：360px；
背景图像：url（'https://www.w3schools.com/css/img_fjords.jpg');
背景重复：无重复；
背景位置：中心；
保证金：0自动；
}
在
过滤器：模糊
规则中，似乎无法删除元素周围的模糊边缘。我会建议一个简单的技巧：

创建两个包含相同图像的重叠div，第一个包含带有图像的
img
元素，第二个作为空div，具有相同的图像作为背景
在高级div中，将图像插入一个更大的包装中，在其周围创建一个边框的效果，边框的厚度足以容纳模糊的边缘。然后对整个包装应用
过滤器：blur
，使模糊的边缘与假边界相匹配；然后，通过
overflow:hidden
调整要显示的图像的尺寸
通过JavaScript，只需在加载时隐藏上级div

setTimeout（函数（）{
$（'.fake image'）.hide（）；
}, 2000);
。假图像{
溢出：隐藏；
宽度：560px；
高度：360px；
保证金：0自动；
位置：绝对位置；
顶部：10px；
左：50px；
z指数：10；
}
.容器备份{
宽度：680px；
高度：480px；
背景色：rgba（255255,0）；
滤镜：模糊（15px）；
左边距：-60px；
利润上限：-60px；
}
.图像顶部img{
填充：40px；
显示：块；
}
.真实bck图像{
位置：绝对位置；
顶部：10px；
左：50px；
溢出：隐藏；
宽度：560px；
高度：360px；
背景图像：url（'https://www.w3schools.com/css/img_fjords.jpg');
背景重复：无重复；
背景位置：中心；
保证金：0自动；
}
好的，下面是解决方案

正如@kaido所建议的，我需要使用svg过滤器方法

但是对于InternetExplorer，我需要生成一个小分辨率的base64图像。10px 10px
然后加载internet explorer的base64图像，当图像拉伸以适合容器时，会产生模糊效果

对于向非模糊图像的过渡，我在支持它的浏览器中使用了SMIL过渡。过滤器：对于不支持SMIL的浏览器进行模糊转换，对于IE不进行转换。图像只是交换

HTML:

谢谢Kaido的帮助：）
好的，下面是解决方案

正如@kaido所建议的，我需要使用svg过滤器方法

但是对于InternetExplorer，我需要生成一个小分辨率的base64图像。10px 10px
然后加载internet explorer的base64图像，当图像拉伸以适合容器时，会产生模糊效果

对于向非模糊图像的过渡，我在支持它的浏览器中使用了SMIL过渡。过滤器：对于不支持SMIL的浏览器进行模糊转换，对于IE不进行转换。图像只是交换

HTML:

感谢Kaido提供的所有帮助：）
您可以混合使用不同的svg过滤器来避免它。见例。这里它适用于您的案例：@kaido Hi谢谢您的帮助：）是否有方法转换此方法。不，至少不是来自CSS…哦，该死的，是的，我需要一个过渡效果：/n任何关于如何完成它的指针。干杯：）嗯。。。如果你不需要IE的支持，那么你可以使用SMIL:但这已经开始完全是黑客行为了。。。甚至chrome看起来也有bug行为。你可以混合使用不同的svg过滤器来避免它。见例。在这里，它适用于您的案例：
    <svg width="0px" height="0px"
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink">

 <filter id="better-blur" x="0" y="0" width="1" height="1">
  <feGaussianBlur stdDeviation="25" result="blurred">
  <animate id="anim" attributeType="XML" attributeName="stdDeviation" from="25" to="0" begin="indefinite" fill="freeze"
        dur="0.35s"></animate>
  </feGaussianBlur>

  <feMorphology in="blurred" operator="dilate" radius="25" result="expanded"></feMorphology>

  <feMerge>
    <feMergeNode in="expanded"></feMergeNode>
    <feMergeNode in="blurred"></feMergeNode>
  </feMerge>
</filter>
</svg>
<div class="image-wrapper orig" style="background-image: url(\'' . esc_url($thePostThumbUrl) . '\'); background-size: cover; background-position: bottom; filter: url(#better-blur);visibility: hidden;"></div>

<script type="text/javascript">
    if (!jQuery("#anim")[0].beginElement) {
        jQuery(".image-wrapper").css("filter", "blur(25px)");
    }
</script>
<script type="text/javascript">
    jQuery(window).load(function() {
        setTimeout(function() {
            if (jQuery("#anim")[0].beginElement) {
                jQuery("#anim")[0].beginElement();
            }
            else {
                jQuery(".image-wrapper").css("filter", "blur(0px)");
            }
        }, 1000);
    });
</script>

.image-wrapper {
transition: 0.25s filter linear;
-webkit-transition: 0.25s filter linear;
-moz-transition: 0.25s filter linear;
-o-transition: 0.25s filter linear;
position: absolute;
top: 0;
left: 0;
overflow: hidden;
display: block;
}