CSSのdivを上書きする

Question

これはなぜ機能しないのですか？あなたは、内側の要素の上にぼかしを元に戻すことはできません

.blured { 
 
    background-color: white; 
 
    opacity: 0.1; 
 
    filter: blur(10px); 
 
} 
 

 
.text { 
 
    filter: blur(none); 
 
    ! 
 
}

<div class="blured"> 
 
    <div class="text"> 
 
    <center> 
 
     <h1 style="font-size: 100px">Title</h1> 
 
    </center> 
 
    <h1 style="margin-top: 100px; text-shadow: 2px 2px 2px #000000;">The text</h1> 
 
    </div> 
 
</div>

Answer 1

を（私は何かを相殺divの内側のdivを作成しようとしています）。しかし、（とこれは実際にぼかしたいものに依存します）それに応じて:before疑似要素とスタイルを追加します。

あなたが試すことができ

.blured{position:relative;} 
 

 
.blured:before { 
 
    content:''; 
 
    position:absolute; 
 
    top:0; 
 
    left:0; 
 
    right:0; 
 
    bottom:0; 
 
    
 
    background: linear-gradient(to right, red,green); 
 
    opacity: 0.1; 
 
    filter: blur(10px); 
 
    z-index:-1; 
 
} 
 

 
.text { 
 
    filter: blur(none); 
 
    ! 
 
}

<div class="blured"> 
 
    <div class="text"> 
 
    <center> 
 
     <h1 style="font-size: 100px">Title</h1> 
 
    </center> 
 
    <h1 style="margin-top: 100px; text-shadow: 2px 2px 2px #000000;">The text</h1> 
 
    </div> 
 
</div>

Answer 2

たとえば "：ない" CSSセレクタ。 MDNからの文書：https://developer.mozilla.org/en-US/docs/Web/CSS/:not。

.blured>*:not(.text) { 
    background-color: white; 
    opacity: 0.1; 
    filter: blur(10px); 
} 

https://jsfiddle.net/vz044hof/