模糊無背景圖片

Question

我爲肉桂創建主題（對於我），我想要在肉桂面板上獲得模糊效果，但我不知道該怎麼做。我知道如何讓這個模糊：

.moreblur { 
 
    position: fixed; 
 
    left: 0; 
 
    right: 0; 
 
    z-index: 1; 
 

 
    display: block; 
 
    background-image: url(http://www.yosemitehikes.com/images/wallpaper/yosemitehikes.com-valley-winter-1366x768.jpg); 
 
    width: 1200px; 
 
    height: 800px; 
 

 
    -webkit-filter: blur(10px); 
 
    -moz-filter: blur(10px); 
 
    -o-filter: blur(10px); 
 
    -ms-filter: blur(10px); 
 
    filter: blur(10px); 
 
}

<div class="moreblur"></div>

但要記住：我需要得到背景圖片，而不是自己的圖像模糊。 謝謝。

Answer 1

如果您無法更改HTML結構以添加要添加background-image和blur的新div。你可以使用一個像pseudo-element:before

參見下面的代碼片段

.moreblur { 
 
    position: fixed; 
 
    width: 1200px; 
 
    height: 800px; 
 
} 
 

 
.moreblur:before { 
 
    left: 0; 
 
    right: 0; 
 
    z-index: 1; 
 
    display: block; 
 
    background-image: url(http://www.yosemitehikes.com/images/wallpaper/yosemitehikes.com-valley-winter-1366x768.jpg); 
 
    -webkit-filter: blur(10px); 
 
    -moz-filter: blur(10px); 
 
    -o-filter: blur(10px); 
 
    -ms-filter: blur(10px); 
 
    filter: blur(10px); 
 
    position: fixed; 
 
    width:100%; 
 
    height:100%; 
 
    content:""; 
 
    z-index:-1; 
 
}

<div class="moreblur"> 
 
    <p> 
 
    I am NOT Blured 
 
    </p> 
 
    <p> 
 
    I am NOT Blured 
 
    </p> 
 
    <p> 
 
    I am NOT Blured 
 
    </p> 
 
    
 
</div>

讓我知道，如果它可以幫助