Question

我有一个网页的CSS样式表。该网页有一个背景颜色为白色的表格（设置在行中，而不是表格中）。我想将不透明度或alpha设置为50％。我尝试了很多变化，但没有运气。

HTML文件中的典型行是：

<tr>
  <td>&nbsp;</td>
  <td>Twitter</td>
</tr>

表格行的CSS设置（完美无缺）是：

tr {
    font-family: Arial, Helvetica, sans-serif; background:rgb(255,255,255);  
}

要获得alpha，我试过

tr {
        font-family: Arial, Helvetica, sans-serif; background-color:rgba(255,255,255,0.5);  
    }

我也试过background-color-opacity: 0.5;

还有其他建议吗？

Answer 1

首先，所有浏览器都不支持同样的方式！要在FF，Opera，Chrome等处获得所需的结果，您可以使用以下两行CSS：

background-color: rgba(255, 255, 255, .5);
color: rgba(255, 255, 255, .5);

THIS链接也有助于获取各种类型的CSS3代码。

我担心如果你想在IE上工作alpha属性，那么对于不同的版本，你必须使用不同类型的代码。你可以谷歌HERE。

希望它对你有所帮助！干杯：）

Answer 2

尝试

tr {
    background-color:rgba(255,255,255,0.5);
}

OR

table {
    background-color:rgba(255,255,255,0.5);
}

您可以看到实时示例here

Answer 3

我们可以查看一个实时示例，还是可以重现问题的JSFiddle？

以下是一个概念验证，表明您的CSS应该有效：http://jsfiddle.net/anstosa/VVA6q/

您可能会遇到其他CSS的冲突

Answer 4

如果您希望查看表格，http://jsfiddle.net/YyNmG/

HTML

<table>
<tr>
  <td>&nbsp;</td>
  <td>Twitter</td>
</tr>
<tr>
  <td>&nbsp;</td>
  <td>Twitter</td>
</tr>
<tr>
  <td>&nbsp;</td>
  <td>Twitter</td>
</tr>
</table>

CSS

table{
    background-color:rgba(100,100,100,0.4);
}
body{
    background-color:red;
}

如果只有TR，http://jsfiddle.net/YyNmG/1/

tr{
    background-color:rgba(100,100,100,0.4);
}
table{background-color:black;}
body{
    background-color:red;
}

使用CSS在表行上使用alpha或opacity

4 个答案: