子元素继承父级的不透明度

我在网页上工作，我想在显示背景图像的透明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

谢谢你完全真棒:) –

子元素继承父级的不透明度

回答

相关问题