Html 使用 CSS 在表格行上使用 alpha 或不透明度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10127544/
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
Use alpha or opacity on a table row using CSS
提问by SnowboardBruin
I have a CSS stylesheet for a webpage. The webpage has a table with a background color of white (set in the rows, not the table). I would like to set the opacity or alpha to 50%. I have tried so many variations, but come up with no luck.
我有一个网页的 CSS 样式表。该网页有一个背景颜色为白色的表格（设置在行中，而不是表格中）。我想将不透明度或 alpha 设置为 50%。我尝试了很多变体，但没有运气。
A typical row in the HTML file is:
HTML 文件中的典型行是：
<tr>
<td> </td>
<td>Twitter</td>
</tr>
The CSS settings for table rows (which works perfectly) is:
表格行的 CSS 设置（完美运行）是：
tr {
font-family: Arial, Helvetica, sans-serif; background:rgb(255,255,255);
}
To get the alpha, I tried
为了获得阿尔法，我试过
tr {
font-family: Arial, Helvetica, sans-serif; background-color:rgba(255,255,255,0.5);
}
I have also tried background-color-opacity: 0.5;
我也试过background-color-opacity: 0.5；
Any other suggestions?
还有其他建议吗？
回答by enam
First of all, all browser do not support it in the same way! To get your desired result at FF, Opera, Chrome etc you can use the following 2 lines of CSS:
首先，不是所有浏览器都以同样的方式支持它！要在 FF、Opera、Chrome 等上获得所需的结果，您可以使用以下 2 行 CSS：
background-color: rgba(255, 255, 255, .5);
color: rgba(255, 255, 255, .5);
THISlink is also helpful to get various types of CSS3 codes.
此链接也有助于获取各种类型的 CSS3 代码。
I am afraid if you want to work alpha property work at IE, then for different version(s) you have to use different types codes. You can google it HERE.
恐怕如果您想在 IE 上使用 alpha 属性工作，那么对于不同的版本，您必须使用不同的类型代码。你可以在这里用谷歌搜索。
Hope it helps you! Cheers :)
希望对你有帮助！干杯:)
回答by Hymantheripper
回答by Ansel Santosa
Is there a live example we can look at or a JSFiddle that can reproduce the problem?
是否有我们可以查看的现场示例或可以重现该问题的 JSFiddle？
Here is a proof of concept showing that your CSS should work: http://jsfiddle.net/anstosa/VVA6q/
这是一个概念证明，表明您的 CSS 应该可以工作：http: //jsfiddle.net/anstosa/VVA6q/
You are likely getting a conflict from some other CSS
您可能会与其他一些 CSS 发生冲突
回答by Ansel Santosa
If you want table to be see through, http://jsfiddle.net/YyNmG/
如果你想看透表格，http://jsfiddle.net/YyNmG/
HTML
HTML
<table>
<tr>
<td> </td>
<td>Twitter</td>
</tr>
<tr>
<td> </td>
<td>Twitter</td>
</tr>
<tr>
<td> </td>
<td>Twitter</td>
</tr>
</table>?
CSS
CSS
table{
background-color:rgba(100,100,100,0.4);
}
body{
background-color:red;
}?
if only TRs, http://jsfiddle.net/YyNmG/1/
如果只有 TR，http://jsfiddle.net/YyNmG/1/
tr{
background-color:rgba(100,100,100,0.4);
}
table{background-color:black;}
body{
background-color:red;
}
