將html元素的不透明度更改爲0.5後，爲什麼我不能將h1元素的不透明度更改回1？

我在CSS中添加了一個背景圖片到我的html元素，因此它隨着網頁瀏覽器的大小而擴展。我將這個HTML元素中的不透明度更改爲0.5。我想要將子元素（特別是h1和段落元素）更改爲不透明度爲1，以便文本不透明。它不起作用。請幫助:)將html元素的不透明度更改爲0.5後，爲什麼我不能將h1元素的不透明度更改回1？

HTML：

<!DOCTYPE html> 
<html> 
<head> 
    <title>Title</title> 
    <link rel = "stylesheet" href = "style.css"> 
</head> 

<body> 

    <p id ="topBar"></p> 

    <h1>Heading</h1> 

    <h3>Name</h3> 

    <p> 
     Paragraph 
    </p> 

    <h3>Heading</h3> 

    <p>More text</p> 

    <h3>Send us an email!</h3> 

    <form> 
     <input style ="width:200px" type="email" placeholder ="Email" name="email"><br><br> 
     <textarea style ="height:100px;width:200px"placeholder = "Message" name="message"></textarea><br><br> 
     <input type="submit" value ="Send" name="send"> 
    </form> 

    <p id ="bottomBar"></p> 
</body> 
</html>

CSS：

html { 

background: url(pen.jpg) no-repeat center fixed; 
background-size: cover; 


font-family: Garamond; 
text-align: center; 

opacity: 0.5; 

} 

h1 { 

opacity: 1; 
}

來源

2016-08-01 koz

@LaurIvan都能跟得上。 h1規則比html規則更具體，因此適用。 – JJJ

整個html文檔都有一個不透明指令，它會影響所有內容，而不管特殊性或優先級。 @LaurIvan加入！重要的是什麼也沒做您只需在特定元素上設置較低的不透明度。 –

@SLowLoris但如何？ h1嵌套在html內部，因此根據css優先級，h1的規則應該覆蓋html的規則 – geeksal

如果設置了家長對0.5透明度，所有的子元素會得到不透明度。我建議你使用一個透明的img作爲背景，或者你可以將該背景賦予僞元素。

（我使用的背景顏色，例如目的，但你可以使用background-image和opacity:0.5來代替。它仍然有效相同）

html { 
 

 

 

 

 
font-family: Garamond; 
 
text-align: center; 
 

 

 
position:relative; 
 

 

 
} 
 
html:before { 
 
    height:100%; 
 
    width:100%; 
 
    position:absolute; 
 
    top:0; 
 
    left:0; 
 
    margin:0 auto; 
 
    background:rgba(0,0,0,0.5); 
 
    
 
    content:""; 
 
    z-index:-1; 
 
} 
 

 
h1 { 
 

 
opacity: 1; 
 
}

<p id ="topBar"></p> 
 

 
    <h1>Heading</h1> 
 

 
    <h3>Name</h3> 
 

 
    <p> 
 
     Paragraph 
 
    </p> 
 

 
    <h3>Heading</h3> 
 

 
    <p>More text</p> 
 

 
    <h3>Send us an email!</h3> 
 

 
    <form> 
 
     <input style ="width:200px" type="email" placeholder ="Email" name="email"><br><br> 
 
     <textarea style ="height:100px;width:200px"placeholder = "Message" name="message"></textarea><br><br> 
 
     <input type="submit" value ="Send" name="send"> 
 
    </form> 
 

 
    <p id ="bottomBar"></p>

來源

2016-08-01 09:18:06

進一步闡明：在父div上設置不透明度爲0.5，在該div內的段落上設置爲0.4將導致子項段上不透明度爲0.5 * 0.4 = 0.2 。 –

-1

的透明度不在這個特殊的情況，因爲工作它從父母那裏繼承，不能被覆蓋。

我改變了你的背景background: rgba(0, 0, 0, .5);然後就沒有必要改變文本的不透明度了。

這是改變它的最簡單的方法，只使用背景的不透明度。

JS fiddle here

html { 
 

 
background: url(pen.jpg) no-repeat center fixed; 
 
background-size: cover; 
 

 

 
font-family: Garamond; 
 
text-align: center; 
 

 
background: rgba(0, 0, 0, .5); 
 

 
}

<body> 
 

 
    <p id ="topBar"></p> 
 

 
    <h1>Heading</h1> 
 

 
    <h3>Name</h3> 
 

 
    <p> 
 
     Paragraph 
 
    </p> 
 

 
    <h3>Heading</h3> 
 

 
    <p>More text</p> 
 

 
    <h3>Send us an email!</h3> 
 

 
    <form> 
 
     <input style ="width:200px" type="email" placeholder ="Email" name="email"><br><br> 
 
     <textarea style ="height:100px;width:200px"placeholder = "Message" name="message"></textarea><br><br> 
 
     <input type="submit" value ="Send" name="send"> 
 
    </form> 
 

 
    <p id ="bottomBar"></p> 
 
</body>

來源

2016-08-01 09:21:10 Relisora

默認情況下，如果父母已經應用了透明度，那麼所有的子元素也採取同樣的不透明度。即使您將子元素設置爲不透明：1也不起作用。

在你的情況下，'html'的不透明度爲0.5，所以它的孩子，即不透明度爲1的'h1'仍然有0.5不透明度。

對於您的問題有兩種解決方案： -
1.通過像Photoshop一樣的照片編輯軟件使背景圖像即'pen.jpg'稍微透明。
2.在'僞'之後使用背景圖像。即

html::after { 
     content: ""; 
     background: url(pen.jpg); 
     opacity:0.5; 
     top: 0; 
     left: 0; 
     bottom: 0; 
     right: 0; 
     position: absolute; 
     z-index: -1; 
}

以上任何一種都適合你。

來源

2016-08-01 09:23:15

我的回答不正確嗎？爲什麼是負面投票？ –

Downvote不是來自我的，但我認爲這是由於這句話：'在你的情況'html'具有不透明度：0.5，所以它的孩子，即具有不透明度：1的'h1'不會有任何區別。「但實際上，如果在另一個不透明度爲0.5的元素中有一個不透明度爲0.5的元素，效果將爲0.25不透明度，因此存在差異。也許你可以編輯那句話...... – gregn3

Thanks @ gregn3。我編輯了我的句子。 –

您也可以將背景應用於body元素而不是html。因爲所有可見內容裏面body標籤

body{ 
 
background:rgba(255,0,0,0.5); 
 

 

 
font-family: Garamond; 
 
text-align: center; 
 

 
opacity: 0.5; 
 

 
} 
 
h1 { 
 

 
opacity: 1; 
 
}

<p id ="topBar"></p> 
 

 
    <h1>Heading</h1> 
 

 
    <h3>Name</h3> 
 

 
    <p> 
 
     Paragraph 
 
    </p> 
 

 
    <h3>Heading</h3> 
 
    
 
    <p>More text</p> 
 

 
    <h3>Send us an email!</h3> 
 

 
    <form> 
 
     <input style ="width:200px" type="email" placeholder ="Email" name="email"><br><br> 
 
     <textarea style ="height:100px;width:200px"placeholder = "Message" name="message"></textarea><br><br> 
 
     <input type="submit" value ="Send" name="send"> 
 
    </form> 
 

 
    <p id ="bottomBar"></p>

來源

2016-08-01 09:28:15 geeksal

將html元素的不透明度更改爲0.5後，爲什麼我不能將h1元素的不透明度更改回1？

回答

相關問題