需要帮助制作不模糊文本css

Question

是否有任何可能的方法使文本不模糊(不更改html代码(我只想使背景模糊，文本不模糊。

我的代码如下

.background {
height: 400px;
background-image: url(photo);
background-repeat: no-repeat;
background-size: 100%;
background-position: center;
filter: blur(1px);
}

<div class="background">
<a href="https://stackoverflow.com" id="something">Home</a>
</div>

Answer 1

我将背景图像移动到一个绝对定位的伪元素，并给它一个负z-index。我将插图设置为0，作为覆盖整个父对象尺寸的简写。这允许文本仍然可见，但不属于模糊效果的一部分。

.background {
height: 400px;
position: relative;
}
.background:before {
content: '';
position: absolute;
inset: 0;
background-image: url("https://images.unsplash.com/photo-1659536002780-73275f63f11c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxfHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=900&q=60");
background-repeat: no-repeat;
background-size: 100%;
background-position: center;
filter: blur(2px);
z-index: -1;
}
#something {
color: white;
font-size: 2rem;
}
html, body {
margin: 0;
}

<div class="background">
<a href="https://stackoverflow.com" id="something">Home</a>
</div>

Answer 2

这是一种需要遵循的方法，尤其是如果您不想按原样更改html代码(代码：https://jsfiddle.net/)

.background {
align-items: center;
display: flex;
justify-content: center;
height: 100%;
width: 100%;
background-color: rgba(255, 255, 255, 0.3);
border-radius: 5px;
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
max-width: 50%;
max-height: 50%;
padding: 20px 40px;
}

html,
body {
height: 100%;
width: 100%;
}
body {
background-image: url(https://picsum.photos/id/1080/6858/4574), linear-gradient(rgb(219, 166, 166), rgb(0, 0, 172));
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}

<div class="background">
<a href="https://stackoverflow.com" id="something">Home</a>
</div>