1

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

4

1 に答える 1

0

ぼかした親要素内の要素の「ぼかしを解除」することはできません。キャッチフレーズの後ろに積み重ねられた、絶対配置の疑似要素を使用して、これを回避できます。

#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-03T15:06:04.447 に答える