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

Question

我目前正在建立一个网站，其中有一个部分将很快推出。所以我已经做的是模糊我想要模糊的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>

Answer 1

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

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

Answer 2

您可以创建父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 3

为了更好，您需要更改您的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;
}