Question

您可以说这是重复的，但是其他问题+答案对我不起作用。

所以。我正在尝试模糊我想要文本的背景。因此，我使用CSS设置了背景图片。并创建了一个透明度为0.1且模糊的div。现在，我想在那个dev（文本）中填写内容。但是那个文字也模糊了！我该如何解决？

我已经在网上搜索了很多关于模糊，模糊等的内容。对我来说，实际上什么都不起作用。

<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<style>
@font-face {
    font-family: ProximaNova;
    src: url("ProximaNova-Regular.otf") format("opentype");
}

@font-face {
    font-family: ProximaNova;
    font-weight: bold;
    src: url("ProximaNova-Bold.otf") format("opentype");
}
body {
  background-image: url("bg.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.aaa {
    position:fixed;
    top: 50%;
    left: 50%;
    width:30em;
    height:18em;
    margin-top: -9em; /*set to a negative number 1/2 of your height*/
    margin-left: -15em; /*set to a negative number 1/2 of your width*/
    border: 1px solid #ccc;
    background-color: #f3f3f3;
    opacity: 0.1;
    -webkit-filter: blur(4px);
    -moz-filter: blur(4px);
    -ms-filter: blur(4px);
    -o-filter: blur(4px);
    filter: blur(4px);
}
.b {
    background-image: url(bg.png);
}
</style>
</head>
<body>
<div class="aaa"><p>Hey, I want this text to NOT be blurred...</p></div>
</body>
</html>

这是一个codepen：https://codepen.io/anon/pen/YbWLgj

里面确实有文本，当您将鼠标悬停在上面时，您可以看到它。感谢您的帮助！

如何在模糊的div中取消模糊文本

0 个答案: