在模糊的背景上清除文本 [英] clear text on top of blurry background
本文介绍了在模糊的背景上清除文本的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在使用CSS过滤器创建模糊的背景,并在其顶部放置文本.但是当我尝试时,文本上也会发生模糊效果.如何避免这种情况并使文字不模糊?
I am using CSS filters to create a blurry background and have text lay on top. But when I try, the blurry effect is taking place on the text as well. How can I avoid this and keep the text non-blurry?
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
推荐答案
您不能在模糊的父元素中取消模糊"元素.您可以使用放置在标语后面的绝对定位的伪元素来解决此问题:
You can't "unblur" an element within a blurred parent element. You can work around that with an absolutely positioned pseudo element, stacked behind your tagline:
#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;
}
这篇关于在模糊的背景上清除文本的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文