我怎样才能覆盖过滤器：包含div的父div的模糊和盒子阴影？

Question

我有一个主要的div有一个filter:blur和box-shadow覆盖的背景图像。

我如何覆盖过滤器：包含div上的父div的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之一。但作为一个直接的孩子，你不能删除父母的过滤器或盒子阴影。就像不透明一样，一些属性影响父母及其所有的孩子。