我想创建一个包含p标记的div。我希望这个div被模糊。内部的p标签不应应用于div标签的不透明度
<div>
<p>text</p>
</div>
div{
filter:blur(5px);
}
p{
filter:blur(0px);
}
当要模糊的元素中有一个元素时，这是不可能的。可以使用容器元素将其相对定位，将两个元素并排放置在其中，并将其绝对定位。
.container {
position: relative;
/* style to your needs */
width: 100px;
height: 100px;
}
.blur {
position: absolute;
/* some styling */
width: 100%;
height: 100%;
background: lime;
filter: blur(5px);
}
.content {
position: absolute;
/* some styling */
font-family: sans-serif;
top: 50%;
left: 50%;
transform: translatex(-50%) translatey(-50%);
margin: 0;
}<div class="container">
<div class="blur"></div>
<p class="content">My not blurred out content</p>
</div>父级的过滤器总是影响子级，那么您可以在伪元素之后使用：来解决它
.parent {
width: 100px;
height: 150px;
position: relative;
}
.parent::after {
content: '';
width: 100%;
height: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: block;
background-image: url(https://cdn.pixabay.com/photo/2022/06/07/15/56/child-7248693_1280.jpg);
background-size: cover;
background-position: center;
filter: blur(5px);
z-index: -1;
}
.child {
z-index: 1;
}<div class="parent">
<p class="child">
text
</p>
</div>body, html {
height: 100%;
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
* {
box-sizing: border-box;
}
.bg-blur {
/* background color is light blue */
background-color: lightblue;
/* Add the blur effect */
filter: blur(8px);
-webkit-filter: blur(8px);
/* Full height */
height: 100%;
}
/* Position text in the middle of the page/image */
.bg-text {
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0, 0.4); /* Black w/opacity/see-through */
color: white;
font-weight: bold;
border: 3px solid #f1f1f1;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
width: 80%;
padding: 20px;
text-align: center;
}<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="bg-blur"></div>
<div class="bg-text">
<h2>Blurred Background</h2>
<h1 style="font-size:50px">I am John Doe</h1>
<p>And I'm a Photographer</p>
</div>
</body>
</html>你可以参考这个链接来更好地理解。。。
你的参考的w3school模板