我怎樣才能覆蓋過濾器：包含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之一。但作爲一個直接的孩子，你不能刪除父母的過濾器或盒子陰影。就像不透明一樣，一些屬性影響父母及其所有的孩子。