是否可以使用 CSS 在模糊度之上添加文本

Question

我目前正在一个网站上工作，该网站有一个即将推出的部分。所以我已经做的是模糊我想模糊的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>

Answer 1

您可以创建父级 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; }

类似的东西。根据需要更改样式。

Answer 2

为了更好的生活，你需要改变你的 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;
}

Answer 3

无需复杂的额外标记，使用伪元素

.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>

是否可以使用 CSS 在模糊度之上添加文本

Is it possible to add text above blurriness with CSS

html

css

blur

css-filters