子元素繼承父級的不透明度

我在網頁上工作，我想在顯示背景圖像的透明div上放一個按鈕。但是當我放置按鈕時它也是透明的。我怎樣才能使它不透明？子元素繼承父級的不透明度

div.background { 
 
    background: url(klematis.jpg) repeat; 
 
    border: 2px solid black; 
 
} 
 
div.transbox { 
 
    margin: 30px; 
 
    background-color: #ffffff; 
 
    border: 1px solid black; 
 
    opacity: 0.6; 
 
    filter: alpha(opacity=60); /* For IE8 and earlier */ 
 
} 
 
div.transbox p { 
 
    margin: 5%; 
 
    font-weight: bold; 
 
    color: #000000; 
 
}

<div class="background"> 
 
    <div class="transbox"> 
 
    <p>This is some text that is placed in the transparent box.</p> 
 
    <input type="button" value="Ok"> 
 

 
    </div> 
 
</div>

來源

2016-07-07 amanda45

您是否嘗試設置樣式按鈕本身？（你沒有在顯示的代碼中。） – nnnnnn

在按鈕本身上放置了1個不透明度，給它添加一個id或class – JordanHendrix

使用rgba()色法，而不是opacity：

div.background { 
 
    background: url(klematis.jpg) repeat; 
 
    border: 2px solid black; 
 
} 
 
div.transbox { 
 
    margin: 30px; 
 
    background-color: rgba(255, 255, 255, 0.6); 
 
    border: 1px solid black; 
 
} 
 
div.transbox p { 
 
    margin: 5%; 
 
    font-weight: bold; 
 
    color: #000000; 
 
}

<div class="background"> 
 
    <div class="transbox"> 
 
    <p>This is some text that is placed in the transparent box.</p> 
 
    <input type="button" value="Ok"> 
 
    </div> 
 
</div>

隨着opacity，效果適用於整個元件，包括子元素和內容。

從MDN：

[不透明度]適用於元件作爲一個整體，包括其內容，即使該值不是由子元素繼承。因此，即使元素及其子元素具有相對於彼此的不同不透明度，元素及其包含的子元素也具有與元素背景相對的相對不透明度。

此規則的例外是background-color設置爲rgba()。

rgba()顏色模型允許通過alpha通道設置opacity。

因此，您可以將父級設置爲div { background-color: rgba (255, 255, 255, 0.6); }，並且這將在background-color上單獨設置opacity至0.6。子元素將不受影響。

這裏瞭解更多：A brief introduction to Opacity and RGBA

不透明度和圖像看到：

來源

2016-07-07 02:20:29

謝謝你完全真棒:) –

子元素繼承父級的不透明度

回答

相關問題