含まれているdivの親divのぼかしとボックスシャドウをどのようにオーバーライドできますか？

Question

私はfilter:blurとbox-shadowのオーバーレイで背景イメージを持つメインdivを持っています。

含まれているdivの親divからのぼかしとボックスシャドウをどのように変更できますか？

次は私の試みです：

<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のにフィルタおよびボックス影を適用することができるようになります。しかし、直接の子として、親のフィルタやボックスの影を削除することはできません。不透明度と同様に、一部のプロパティは親とそのすべての子に影響します。