Html 只是 jumbotron 上的不透明度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23384833/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Opacity on just jumbotron
提问by EspenG
I want to set the jumbotron to 0.5 opacity.
我想将超大屏幕设置为 0.5 不透明度。
<div class="jumbotron">
<table id="white" class="table table-condensed" id="table">
<tbody>
<tr>
<td>En</td>
<th>1</th>
</tr>
<tr>
<td>To</td>
<th>2</th>
</tr>
</tbody>
</table>
</div>
Is there a way to do this on just the jumbotron and not the table?
有没有办法只在超大屏幕上而不是桌子上做到这一点？
回答by Victor
Use RGBa
使用 RGBa
.jumbotron {
background: rgb(200, 54, 54); /* This is for ie8 and below */
background: rgba(200, 54, 54, 0.5);
}
Last value on the second line (0.5) is the opacity.
第二行 (0.5) 上的最后一个值是不透明度。
For clarity this won't work on ie8 or below as rgba is not supported.
为清楚起见，这不适用于 ie8 或更低版本，因为不支持 rgba。
回答by Mike
Give jumbotron an ID and set that ID to opacity via the rgbaproperty in the CSS.
给超大屏幕的ID，并设置通过ID，以不透明rgba的财产CSS。
CSS:
CSS：
#jumbo {
/* IE8 and below */
background: rgb(200, 54, 54);
/* all other browsers */
background: rgba(200, 54, 54, 0.5);
}
#white {
background: rgb(255, 255, 255);
}
HTML:
HTML：
<div class="jumbotron" id="jumbo">
<table id="white" class="table table-condensed" id="table">
<tbody>
<tr>
<td>En</td>
<th>1</th>
</tr>
<tr>
<td>To</td>
<th>2</th>
</tr>
</tbody>
</table>
</div>
Set the opacity via rgbaof the child elements back to opaque.
将rgba子元素的不透明度设置回不透明。
回答by SW4
Demo Fiddle
演示小提琴
CSS opacity is defined by the parent and is a hierarchical property, so any children inherit/are subjected to their parents opacity.
CSS 不透明度由父项定义并且是一个分层属性，因此任何子项都会继承/受制于其父项的不透明度。
The way you can accomplish varying levels of opacity for nested elements is to set any respective colorproperties using rgbavalues, this wont however work for things like background images etc (unless in imgtags in which case they can be targeted seperately)
您可以为嵌套元素实现不同级别的不透明度的方法是使用rgba值设置任何相应的颜色属性，但这不适用于背景图像等（除非在标签中，在这种情况下它们可以单独定位）img
RGBa .. Extends the RGB color model to include "alpha" to allow specification of the opacity of a color. a means opacity: 0=transparent; 1=opaque;
RGBa .. 扩展 RGB 颜色模型以包含“alpha”以允许指定颜色的不透明度。a 表示不透明度：0=透明；1=不透明；
