模糊无背景图片

我为肉桂创建主题（对于我），我想要在肉桂面板上获得模糊效果，但我不知道该怎么做。我知道如何让这个模糊：模糊无背景图片

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

但要记住：我需要得到背景图片，而不是自己的图像模糊。谢谢。

来源

2016-08-12 JakiHappyCity

使用不透明度：0.3（任意值）在.moreblur类。 – San

你需要告诉我们你有什么代码...不是你没有的。 –

复制 - http://stackoverflow.com/questions/20039765/how-to-apply-a-css-3-blur-filter-to-a-background-image –

如果您无法更改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>

让我知道，如果它可以帮助

来源

2016-08-12 12:05:37

This works，thx！ :) – JakiHappyCity

模糊无背景图片

回答

相关问题