css - 如何覆盖过滤器 :blur and box-shadow from parent div on a contained div?

Question

我有一个主 div，它有一个带 filter:blur 的背景图片和一个 box-shadow 叠加层。

如何在包含的 div 上覆盖父 div 的 filter:blur 和 box-shadow？

以下是我的尝试:

 <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>

Answer 1

您可以在两个 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。但作为直接子项，您不能移除父项的滤镜或框阴影。与不透明度非常相似，某些属性会影响父级及其所有子级。