是否可以使用 CSS 在模糊上方添加文本答案

【问题标题】：Is it possible to add text above blurriness with CSS是否可以使用 CSS 在模糊上方添加文本
【发布时间】：2023-03-22 20:48:01
【问题描述】：

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

&lt;div class="blur"&gt;Coming Soon&lt;/div&gt;

【问题讨论】：

标签： html css blur css-filters

【解决方案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;
}

&lt;div class="blur"&gt;&lt;span&gt;Coming Soon&lt;/span&gt;&lt;/div&gt;

【讨论】：

当我将您的代码放入浏览器时，它不起作用。它只显示文本，而不是 div。一旦我删除 z-index，div 就会回来
@JoeyBordono 我更新了我的代码，这可能是由于 z-index
这可以用来改变通过 css background-image: url(); 放置的背景图像的不透明度，而不是改变同样在 div 中的内容的不透明度吗？
@UnitedProDesign 是的，绝对是 :) 您将图像放在 :before 中并对其应用不透明度；)
我一直在试图找出一种方法来完成这项工作。惊人的！谢谢

【解决方案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; }

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

【讨论】：

您也可以不设置父 div 的绝对位置而是设置其高度。如果在父 div 上使用绝对位置，请将 body 或下一个 div 设置为 position: relative;
避免不使用绝对位置的另一种选择是仍然使用父 div，将所有内容设置为 float: left; 或 display: block;，并在文本上使用负边距以定位在模糊的顶部。

【解决方案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;
}

【讨论】：