清除使用CSS模糊圖像外部的白色陰霾

Question

好的，我有一個模糊的圖像，並且在加載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> 

但這樣做的麻煩是圖像外部有白色陰影。

Here is a fiddle證明什麼在

會如你所見，我嘗試用width: 110%;margin-left: -5%;height: 110%;margin-top: -5%;第二圖像刪除的陰霾。但這不是正確的解決方案。

一旦dom被加載並且圖像未被模糊化，圖像在div之外5％;

有什麼辦法，我可以得到圖像陰霾，以從圍繞圖像的邊緣消失無圖像會在image-wrapper-container2 div元素的邊界

乾杯外

Answer 1

好了，所以這裏是解決方案，

由於@Kaiido建議我需要使用SVG過濾方法。

但是，對於Internet Explorer，我需要生成一個小的分辨率的base64圖像。 10px x 10px 然後加載Internet Explorer的base64圖像，這會在圖像被拉伸以適合容器時創建模糊的效果。

對於過渡到非模糊圖像，我使用了支持它的瀏覽器的SMIL轉換。過濾器：模糊過渡的瀏覽器不支持SMIL和IE瀏覽器沒有轉換圖像只是交換。

HTML：

<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> 

JAVASCRIPT：

<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> 

CSS：

.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; 
} 

感謝Kaiido你的幫助:)

Answer 2

似乎沒有辦法去除filter:blur規則中元素周圍的模糊邊緣。我建議一個簡單的一招代替：

1. 創建包含相同的圖像，包含與圖像的img元件的第一個，而第二個與相同的圖像作爲背景的空div兩個重疊的div。
2. 在高級div內部，將圖像居中插入一個更大的包裝中，在其周圍創建邊框的效果，厚度足以容納模糊的邊緣。然後將filter:blur應用於整個包裝，使模糊邊緣適合假邊界;然後通過overflow:hidden調整要顯示的圖像的尺寸。
3. 通過JavaScript，只需隱藏高級div。

setTimeout(function() { 
 
     $('.fake-image').hide(); 
 
    }, 2000);

.fake-image { 
 
     overflow: hidden; 
 
     width: 560px; 
 
     height: 360px; 
 
     margin: 0 auto; 
 
     position: absolute; 
 
     top: 10px; 
 
     left: 50px; 
 
     z-index: 10; 
 
    } 
 

 
    .container-backup{ 
 
     width: 680px; 
 
     height: 480px; 
 
     background-color: rgba(255,255,255,0); 
 
     filter: blur(15px); 
 
     margin-left: -60px; 
 
     margin-top: -60px; 
 
    } 
 

 
    .image-top img{ 
 
     padding: 40px; 
 
     display: block; 
 
    } 
 

 
    .real-bck-image { 
 
     position: absolute; 
 
     top: 10px; 
 
     left: 50px; 
 
     overflow: hidden; 
 
     width: 560px; 
 
     height: 360px; 
 
     background-image: url('https://www.w3schools.com/css/img_fjords.jpg'); 
 
     background-repeat: no-repeat; 
 
     background-position: center; 
 
     margin: 0 auto; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="fake-image"> 
 
    <div class="container-backup"> 
 
    <div class="image-top"> 
 
     <img src="https://www.w3schools.com/css/img_fjords.jpg" alt=""> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<div class="real-bck-image"></div>

我希望它能幫助！

乾杯