CSS中的不透明度適用於子div

關於CSS中不透明屬性的問題。我有一個標題頭，我有一個不透明的.3應用於它（以及一個過渡，但這不是問題的關鍵）。這裏是一個GIF：CSS中的不透明度適用於子div

現在，我喜歡的標題有，你可以很明顯的看出其背後的圖像效果，但我想標題本身出現白色，不透明度爲1。由於的不透明度應用於其父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>

來源

2017-03-15 Paul

的[我不想繼承的CSS父孩子不透明度]可能的複製（http://stackoverflow.com/questions/5770341/i-do-not-want-to-繼承-的孩子，不透明度，來自該家長在-CSS） –

而是不透明的，你可以使用background-color: rgba(0,0,0,0);和background-color: rgba(0,0,0,.3);

RGBA代表紅，綠，藍，α。

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>

來源

2017-03-15 06:07:10

我看到你正在使用的ID爲您的div的。也許你可以用類來代替。

CSS文件中的樣式應該「級聯」。因此，理論上，這應該允許稍後在樣式表中聲明的樣式重寫先前聲明的樣式。但是由於更具體的選擇器（如ID），這不會像我們想要的那樣頻繁發生。

例如，如果您有以下HTML：

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

和CSS：

#element { 
background: blue; 
} 

body div.element { 
background: green; 
}

即使身體div.element選擇的#element ID選擇後出現，而且儘管事實上，「body」元素作爲選擇器的一部分被包含，元素的背景將是藍色的 - 而不是綠色 - 因爲ID選擇器比第二個選擇器更具體，並且自然級聯已被覆蓋。

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

來源

2017-03-15 06:25:45 Armenak

CSS中的不透明度適用於子div

回答

相關問題