0

我有一个表格，为了实现表格突出显示，我使用 rgba 类突出显示行和列，同时在背景中保持它们的原始颜色。

这是我想要完成的完美示例......直到 IE9 进入图片。蓝色列的背景 rgba 显示不透明。

.highlighted-row {
background-color: rgba(255,255,77,0.35) !important;
}
.highlighted-column {
    background: rgba(52,153,207,0.15) !important; 
}
4

2 回答 2

1

这似乎是 IE9 中的一个错误，尽管它显然完全支持 rgba() colors。

选项 #1 - 硬编码颜色

正如您在对另一个答案的评论中所说，对颜色进行硬编码是一种解决方案。有几种方法可以做到这一点，但这是我的建议：

如果您更改要在<td>关卡上应用的背景颜色，则硬编码背景颜色会非常有效，甚至可以让您继续使用 alpha。这将允许它与桌子后面的任何背景颜色或图像混合。这种方法的一个好处是您不必更改 HTML。这样做的缺点是您必须手动计算新的 alpha 混合，这可能有点麻烦。

CSS：

td.highlighted {
    background: rgba(52,153,207,0.15); 
}

tr.highlighted td {
    background: rgba(255,255,77,0.35);
}

tr.highlighted td.highlighted {
    background: rgba(187, 227, 127, 0.4475);
}

HTML：

<table>
    <tr class="highlighted">
        <td>1928</td>
        <td>Test</td>
        <td class="highlighted">$1,000,000.00</td>
    </tr>       
    <tr>
        <td>1928</td>
        <td>Test</td>
        <td class="highlighted">$1,000,000.00</td>
    </tr>
</table>

选项 #2 - 使用<div>

如果您不想硬编码您的 CSS 颜色，您可以将每个可能突出显示的表格单元格的内容包装在一个<div>大小适合的范围内。

我不会推荐这种方法，因为从长远来看，维护起来会更加痛苦，并且会使您的 HTML 更加复杂。但是，如果您想重新命名您的网站，如果您仅限于 IE9，则在调整颜色时临时使用此方法可以让您更轻松。

CSS：

tr.highlighted {
    background: rgba(255,255,77,0.35);
}

td>div {
    width: 100%;
    height: 100%;
    padding: 0;
}

td.highlighted>div {
    background: rgba(52,153,207,0.15); 
}

HTML：

<table>
    <tr class="highlighted">
        <td><div>1928</div></td>
        <td><div>Test</div></td>
        <td class="highlighted"><div>$1,000,000.00</td>
    </tr>
    <tr>
        <td><div>1928</div></td>
        <td><div>Test</div></td>
        <td class="highlighted"><div>$1,000,000.00</div></td>
    </tr>
</table>
于 2013-07-05T16:21:55.820 回答
0

而不是background-color尝试使用 just background。

.highlighted-row {
background: rgba(255,255,77,0.35) !important;
}
于 2013-07-05T13:32:08.427 回答