模糊背景上的明文

我使用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

模糊背景上的明文

回答

相关问题