模糊背景上的明文

我使用CSS過濾器來創建模糊的背景並將文本放在頂部。但是當我嘗試時，文字上也出現了模糊的效果。我怎樣才能避免這種情況，並保持文本不模糊？模糊背景上的明文

HTML

<div id="intro"> 
    <h1 id="tagline">A dinner to remember...</h1> 
</div>

CSS

#intro{ 
background:url(../img/meal.jpg) no-repeat; 
background-size: cover; 
height: 500px; 
filter: blur(5px); 
-webkit-filter: blur(5px); 
-moz-filter: blur(5px); 
-o-filter: blur(5px); 
-ms-filter: blur(5px);

}

#tagline { 
text-align: center; 
font-family: 'Lobster', cursive; 
position: relative; 
font-size: 4em; 
color: #fff;

}

截圖：http://d.pr/i/fAFe

來源

2013-11-03 catchmikey

它繼承了父母的信息。你需要undeclare在嵌套的div模糊 – Adsy2010

這個問題和解決方案（http://stackoverflow.com/questions/806000/css-semi-transparent-background-but-not-text/8858972#8858972）處理應用透明度到背景並保持文字不透明。也許您可以修改它以將模糊應用於背景並保持文本清晰。 – frozenkoi

您不能「模糊」一個模糊父元素中的元素。您可以解決與絕對定位僞元素，層疊的標語背後：

#intro { 
    height: 500px; 
    position: relative; 
} 

#intro:before { 
    content: ""; 
    background:url(../img/meal.jpg) no-repeat; 
    background-size: cover; 
    width: 100%; 
    height: 500px; 
    position: absolute; 
    z-index: -1; 
    filter: blur(5px); 
} 

#tagline { 
    text-align: center; 
    font-family: 'Lobster', cursive; 
    font-size: 4em; 
    color: #fff; 
}

JSFiddle

來源

2013-11-03 15:06:04 kremalicious

模糊背景上的明文

回答

相關問題