如何在包含的 div 上覆盖来自父 div 的 filter:blur 和框阴影?
How can I override filter:blur and box-shadow from parent div on a contained div?
我有一个主 div,它有一个带 filter:blur
的背景图像和一个 box-shadow
叠加层。
如何在包含的 div 上覆盖来自父 div 的 filter:blur 和框阴影?
以下是我的尝试:
<style type="text/css">
#home_main {
margin: -30px;
background-size: cover;
padding: 0;
background-image: url('img/bg.jpg') !important;
filter: blur(2px);
overflow: hidden;
box-shadow: inset 0 0 0 1000px rgba(0,0,0,.3);
}
body {
overflow: hidden !important;
}
#home_content {
text-align: center;
color: #fff !important;
font-weight: 600;
position: fixed;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
text-shadow: none;
font-family: 'Open Sans' !important;
filter: initial !important;
box-shadow: initial !important;
}
#home_content h1 {
font-size: 42px;
font-weight: bold;
}
</style>
<div id="home_main">
<div id="home_content">
Info Management System
</div>
</div>
您可以在两个 div 周围添加一个包装器。您已经在使用定位。
.wrap { position: relative; }
#home_main {
margin: -30px;
background-size: cover;
padding: 0;
filter: blur(2px);
overflow: hidden;
box-shadow: inset 0 0 0 1000px rgba(200,0,0,.3);
/* added so the div shows here */
width: 300px;
height: 300px;
background-image: url('https://static.pexels.com/photos/130763/pexels-photo-130763.jpeg');
}
#home_content {
text-align: center;
color: #fff ;
font-weight: 600;
position: absolute;
z-index: 2;
top: 40%;
transform: translateY(-50%);
width: 240px; /* width of image div minus it's negative margins */
}
#home_content h1 {
font-size: 42px;
font-weight: bold;
}
<div class="wrap">
<div id="home_content">
Info Management System
</div>
<div id="home_main"></div>
</div>
这将允许您仅将滤镜和框阴影应用于其中一个 div。但作为直接子项,您不能移除父项的滤镜或框阴影。与不透明度非常相似,某些属性会影响父级及其所有子级。
我有一个主 div,它有一个带 filter:blur
的背景图像和一个 box-shadow
叠加层。
如何在包含的 div 上覆盖来自父 div 的 filter:blur 和框阴影?
以下是我的尝试:
<style type="text/css">
#home_main {
margin: -30px;
background-size: cover;
padding: 0;
background-image: url('img/bg.jpg') !important;
filter: blur(2px);
overflow: hidden;
box-shadow: inset 0 0 0 1000px rgba(0,0,0,.3);
}
body {
overflow: hidden !important;
}
#home_content {
text-align: center;
color: #fff !important;
font-weight: 600;
position: fixed;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
text-shadow: none;
font-family: 'Open Sans' !important;
filter: initial !important;
box-shadow: initial !important;
}
#home_content h1 {
font-size: 42px;
font-weight: bold;
}
</style>
<div id="home_main">
<div id="home_content">
Info Management System
</div>
</div>
您可以在两个 div 周围添加一个包装器。您已经在使用定位。
.wrap { position: relative; }
#home_main {
margin: -30px;
background-size: cover;
padding: 0;
filter: blur(2px);
overflow: hidden;
box-shadow: inset 0 0 0 1000px rgba(200,0,0,.3);
/* added so the div shows here */
width: 300px;
height: 300px;
background-image: url('https://static.pexels.com/photos/130763/pexels-photo-130763.jpeg');
}
#home_content {
text-align: center;
color: #fff ;
font-weight: 600;
position: absolute;
z-index: 2;
top: 40%;
transform: translateY(-50%);
width: 240px; /* width of image div minus it's negative margins */
}
#home_content h1 {
font-size: 42px;
font-weight: bold;
}
<div class="wrap">
<div id="home_content">
Info Management System
</div>
<div id="home_main"></div>
</div>
这将允许您仅将滤镜和框阴影应用于其中一个 div。但作为直接子项,您不能移除父项的滤镜或框阴影。与不透明度非常相似,某些属性会影响父级及其所有子级。