是否可以使用 CSS 在模糊度之上添加文本
Is it possible to add text above blurriness with CSS
我目前正在一个网站上工作,该网站有一个即将推出的部分。所以我已经做的是模糊我想模糊的DIV。我的想法是在上面添加文字 "Coming Soon"。我不是 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>
您可以创建父级 div,并在其中添加模糊 div 和文本 div 并使用 position: absolute 将它们放在彼此之上。
<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; }
类似的东西。根据需要更改样式。
为了更好的生活,你需要改变你的 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;
}
无需复杂的额外标记,使用伪元素
.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>
我目前正在一个网站上工作,该网站有一个即将推出的部分。所以我已经做的是模糊我想模糊的DIV。我的想法是在上面添加文字 "Coming Soon"。我不是 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>
您可以创建父级 div,并在其中添加模糊 div 和文本 div 并使用 position: absolute 将它们放在彼此之上。
<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; }
类似的东西。根据需要更改样式。
为了更好的生活,你需要改变你的 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;
}
无需复杂的额外标记,使用伪元素
.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>