模糊背景沒有重組的HTML？

-1

我想將CSS模糊屬性應用於包裝div，但不想影響我的文本。對於我使用的框架來說，重構html是相當困難的。有沒有辦法只將藍色背景而不是文字？模糊背景沒有重組的HTML？

HTML結構

<div class="wrapper"> 
<h1>Hello World</h1> 
</div>

CSS

.wrapper{ 
-webkit-filter: blur(5px); 
-moz-filter: blur(5px); 
-o-filter: blur(5px); 
-ms-filter: blur(5px); 
filter: blur(5px); 
background-color:red; 
}

如果任何人都可以點我到一個解決的方向，如果有，那將不勝感激。

來源

2016-01-07 knocked loose

也許值得注意的是，你實際上不能模糊背景 ...只有元素。

所以，一個僞元素就是這裏的答案。

.wrapper { 
 
    position: relative; 
 
} 
 
.wrapper::before { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    -webkit-filter: blur(5px); 
 
    -moz-filter: blur(5px); 
 
    -o-filter: blur(5px); 
 
    -ms-filter: blur(5px); 
 
    filter: blur(5px); 
 
    background-color: red; 
 
    z-index: -1; 
 
}

<div class="wrapper"> 
 
    <h1>Hello World</h1> 
 
</div>

來源

2016-01-07 16:39:40

這將工作，非常感謝你！ –

嘗試使用.wrapper:before和文體的背景，而不是.wrapper。這codepen通過Matthew Wilcoxson可能會有所幫助。

來源

2016-01-07 16:39:58

儘管這可能會在理論上回答這個問題，但在這裏包括答案的基本部分，並提供了供參考的鏈接。[**] [**]（// meta.stackoverflow.com/q/8259）只有鏈接的答案可能會失效，如果鏈接的頁面發生變化......我也只是回答了這個問題......但是你不能模糊背景......只有元素。 –

是的，你說得對。我現在有點匆忙。我稍後再編輯它。 –

你可以這樣做，但你只重複我已經回答的內容......這取決於你。 –

模糊背景沒有重組的HTML？

回答

相關問題