如何模糊css3中的整個背景圖像？

body 
{ 
background-image:url("hamburger.jpg"),url("glitter.png"); 
background-blend-mode:color-dodge; 
filter:blur(5px); 
}

我已經添加了兩個背景圖像，一個主要jpg圖像和另一個帶有閃光效果的png圖像。我試圖用顏色閃避來混合它們，但閃光燈占主導地位。另外，我需要模糊閃閃發光的？我試圖模糊圖像，但只有文字變得模糊。如何模糊css3中的整個背景圖像？

來源

2017-10-16 Subh20

你能提供一對截圖來展示你做了什麼以及你正在做什麼嗎？ –

我已添加圖片。請參考 – Subh20

對不起，我看不到它，你確定你上傳了這些圖片嗎？ –

我完全得到你想要在這裏實現的。是的，您可以通過使用兩個單獨的元素或在僞元素的幫助下疊加一個背景圖像。

就是這樣說的，你將無法實現你正在尋找的效果。爲什麼？因爲在模糊圖像時，模糊了整個圖像，而不是位圖中存在的特定閃爍粒子（您無法做到這一點）。整個圖像的模糊產生了一種模糊的效果，我想這不是你想要的。

我玩過一些圖片，將它們疊放在一起，調整不透明度和濾鏡，下面是我想到的;看看是否有幫助。

.effect { 
 
    position: relative; 
 
    height: 100vh; 
 
    width: 100vw; 
 
    background-image: url("https://unsplash.it/700/400?image=411"); 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
} 
 

 
.effect:after { 
 
    position: absolute; 
 
    z-index: 2000; 
 
    width: 100%; 
 
    height: 100%; 
 
    top: 0; 
 
    left: 0; 
 
    background: url("https://s3.amazonaws.com/spoonflower/public/design_thumbnails/0249/0963/rrrrSparkle_silver_mirror.png") 0 0 no-repeat/cover; 
 
    content: ""; 
 
    filter: blur(3px); 
 
    opacity: .35; 
 
} 
 

 
.effect-inner { 
 
    position: relative; 
 
    z-index: 3000; 
 
}

<div class="effect"> 
 
    <div class="effect-inner"> 
 
    <h2>CSS is fun!</h2> 
 
    </div> 
 
</div>

如果你正在尋找更多的，你肯定需要一個JavaScript解決方案，CSS沒有什麼幫助這裏。

來源

2017-10-16 18:20:47

祝你好運！隨意投票你發現有用的答案。 –

你忘了指定所需的語言，JavaScript中，CSS或HTML。對於你想要代碼的CSS，但對於CSS只需輸入：

.Background Image { 
    filter: blur(20px); 
}

這樣更容易。但是，如果您使用色彩混合，則需要模糊較大的圖像

您還可以使用filer完成其他許多操作，例如，您可以編輯對比度和陰影。如果您想了解更多關於過濾器的信息，請訪問此網站： Learn More

如果您詢問HTML或JavaScript，請留言，因爲您沒有將它寫在「問題描述」中。

來源

2017-10-16 18:08:06

我希望它在html中。此過濾器模糊了整個網頁，而不僅僅是背景圖片。 – Subh20

如何模糊css3中的整個背景圖像？

回答

相關問題