Wie kann ich Filter überschreiben: Blur und Box-Shadow von Eltern Div auf einem enthaltenen div?

Question

Ich habe eine Haupt-Div, die ein Hintergrundbild mit filter:blur und einem box-shadow Overlay hat.

Wie kann ich Filter überschreiben: Blur und Box-Shadow von Eltern Div auf einem enthaltenen div?

Nachstehend ist mein Versuch:

<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

Sie könnten einen Wrapper um die beiden divs hinzufügen. Sie verwenden bereits Positionierung.

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

Dies ermöglicht es Ihnen, nur eine der divs den Filter und Box Schatten anzuwenden. Aber als direkt untergeordnetes Objekt können Sie den Filter- oder Box-Schatten des übergeordneten Objekts nicht entfernen. Ähnlich wie die Deckkraft wirken sich einige Eigenschaften auf den übergeordneten und alle seine untergeordneten Elemente aus.