我正在使用 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;
}