子divに適用されるCSSの不透明度

Question

CSSの不透明度プロパティに関する質問。 私はタイトルのヘッダーを持っていますが、不透明度は.3に適用されています（トランジションも同様ですが、それは質問に関するものではありません）。ので、あなたは明らかにそれの後ろの画像を見ることができるよう

は今、私は、ヘッダが持つ効果は好きですが、私は白表示されるように、タイトル自体をしたいと思い、不透明度1時：ここ は、GIFですその親divに適用された不透明度のうち、ヘッダーでは、divの残りの部分のように退色している​​ように見えます。 これを行う方法はありますか？言い換えれば、親要素の不透明度を「オーバーライドする」方法がありますか？

html, 
 
body { 
 
    margin: 0px; 
 
    padding: 0px; 
 
    height: 100vh; 
 
} 
 

 
#header { 
 
    position: absolute; 
 
    width: 100vw; 
 
    height: 0vh; 
 
    background-color: black; 
 
    opacity: 0; 
 
    z-index: 6; 
 
    transition: height 1s ease, opacity 1s ease; 
 
} 
 

 
#hoverable { 
 
    position: absolute; 
 
    height: 10vh; 
 
    width: 100%; 
 
    z-index: 7; 
 
} 
 

 
#hoverable:hover #header { 
 
    opacity: .3; 
 
    height: 10vh; 
 
} 
 

 
#title { 
 
    margin-left: 10vw; 
 
    line-height: 10vh; 
 
    float: left; 
 
}

<div id="hoverable"> 
 
    <div id="header"> 
 
    <div id="title"> 
 
     <h1>TITLE</h1> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

代わりの不透明あなたは赤、緑、青、アルファの略background-color: rgba(0,0,0,0);とbackground-color: rgba(0,0,0,.3);

RGBAを使用することができます。私はあなたがあなたのdivのためのIDを使用している参照

html, 
 
body { 
 
    margin: 0px; 
 
    padding: 0px; 
 
    height: 100vh; 
 
} 
 

 
#header { 
 
    position: absolute; 
 
    width: 100vw; 
 
    height: 0vh; 
 
    background-color: rgba(0,0,0,0); 
 
    z-index: 6; 
 
    transition: height 1s ease, background 1s ease; 
 
} 
 

 
#hoverable { 
 
    position: absolute; 
 
    height: 10vh; 
 
    width: 100%; 
 
    z-index: 7; 
 
} 
 

 
#hoverable:hover #header { 
 
    background-color: rgba(0, 0,0,.3); 
 
    height: 10vh; 
 
} 
 

 
#title { 
 
    margin-left: 10vw; 
 
    line-height: 10vh; 
 
    float: left; 
 
}

<div id="hoverable"> 
 
    <div id="header"> 
 
    <div id="title"> 
 
     <h1>TITLE</h1> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

。クラスを代わりに使うことができるかもしれません。

CSSファイルのスタイルは、「カスケード」されています。だから、理論的には、スタイルシートで後に宣言されたスタイルは、これまでに宣言されているスタイルを上書きすることができます。しかし、より特定のセレクタ（IDのようなもの）のために、これは私たちが望むほど頻繁には起こりません。例えば

、次のHTMLがあった場合：

<div id="element" class="element"> 
<!-- stuff goes here... --> 
</div> 

とCSSを：

ボディdiv.elementセレクタは#elementのIDセレクタの後に表示されていても

#element { 
background: blue; 
} 

body div.element { 
background: green; 
} 

、とにもかかわらず、実際にはbody要素がセレクタの一部として含まれているため、IDセレクタが第2のセレクタよりも具体的で自然なカスケードがオーバーライドされているため、要素の背景は青色ではなく緑色になります。

https://www.impressivewebs.com/difference-class-id-css/