是否可以使用CSS在模糊上面添加文本？
是否可以使用CSS在模糊上面添加文本？
提问于 2018-03-01 03:18:52
我目前正在一个网站的工作，其中有一个部分，什么将推出不久。所以我已经做的是模糊了我想要模糊的DIV。我的想法是在上面加上“很快就来”的文字。我不是CSS专家，但如果不模糊div中的文本，这有可能吗？
这就是我到目前为止所做的：
.blur{
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
height: 222px;
background-color: #ccc;
}<div class="blur">Coming Soon</div>
回答 3
Stack Overflow用户
回答已采纳
发布于 2018-03-01 08:32:01
没有必要让额外的标记复杂化，使用伪元素
.blur {
height: 222px;
position:relative;
font-size:40px;
text-align:center;
}
.blur:before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
filter: blur(5px);
z-index:0;
}
.blur span {
position:relative;
z-index:1;
}<div class="blur"><span>Coming Soon</span></div>
Stack Overflow用户
发布于 2018-03-01 03:23:58
您可以创建一个父div，并在其中添加模糊div和文本div，并使用“绝对”将它们放在另一个上。
<div id="parent">
<div id="blurred"><img src="images/skldmsaklmdask.jpg"></div>
<h2 id="text">TEXT ON TOP OF DIV</h2>
</div>
<style>
#parent { position: absolute; top: 0; left: 0; right: 0; bottom: 0; }
#blurred { position: absolute; top: 0; left: 0; right: 0; bottom: 0;-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
height: 222px;
background-color: #ccc;
}
#text { position: absolute; top: 50%; width: 50%; left: 25%; font-size: 2vw; color: #fff; }一些类似的东西。改变你认为合适的造型。
Stack Overflow用户
发布于 2018-03-01 04:31:15
为了得到更好的结果，您需要更改html。
试试这个
.parent {
width: 50%;
height: 222px;
position: relative;
overflow: hidden;
}
.parent .blur {
display: block;
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
background-color: #ccc;
}
.parent h1 {
position: relative;
font-size: 25px;
color: #fff;
z-index: 5;
text-align: center;
line-height: 150px;
}<div class="parent">
<h1>Coming Soon</h1><!-- your content -->
<span class="blur"></span><!-- blur box -->
</div><!-- parent -->
如果要裁剪边缘，请向此添加更改.parent blur样式
.parent .blur {
display: block;
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
position: absolute;
top: -10px;
right: -10px;
bottom: -10px;
left: -10px;
background-color: #ccc;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/49042095
复制相关文章
相似问题
腾讯云开发者
