1

这是来自 w3s 网站的 HTML/jquery 代码。如果您在以下位置尝试：Try It W3S 您将看到问题所在。奇数行的不透明度与偶数行不同，这没关系，但我希望文本颜色（或亮度）保持不变。怎么做？我已经通过设置进行了尝试：$("tr td").css("opacity","1.0");但它没有帮助。

<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){

 $("tr").css("background-color", "yellow").css("opacity","1.0");

 $("tr:odd").css("opacity","0.5");
 $("tr td").css("opacity","1.0");
});
</script>
</head>
<body>

<h1>Welcome to My Web Page</h1>

<table border="1">
<tr>
  <th>Company</th>
  <th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Germany</td>
</tr>
<tr>
<td>Berglunds snabbkцp</td>
<td>Sweden</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>UK</td>
</tr>
</table>

</body>
</html>
4

3 回答 3

3

实际上，文本颜色保持不变。但是，opacity总是会影响整个元素（背景、边框、文本颜色）及其所有后代。如果您只想拥有透明背景，则必须对背景使用 hsla 或 rgba 颜色，这会引入“透明”通道，该通道仅影响该单个元素的背景：

// all you need is:
$(document).ready(function(){
    $("tr:even").css("background-color","rgb(255,255,0)");
    // rgba equivalent for yellow with 50% opacity
    $("tr:odd").css("background-color","rgba(255,255,0,0.5)");
});

您修改后的示例

编辑：或者这个关于将 RGB 转换为 RGBA的问题非常有趣，并且触及了关于不透明度改变颜色的视觉表示的主题。

然而，你根本不需要 javascript 来达到这个效果，一个简单的 css 声明就可以了。

于 2013-06-13T15:56:46.227 回答
3

您可以使用 CSS3 非常简单地做到这一点：

tr:nth-child(odd) {background-color: rgba(255, 255, 0, 0.5);}
于 2013-06-13T16:01:38.403 回答
0

这可能会有所帮助，

    <script>
    $( "tr:even" ).css( "background-color", "#A9D6F5" );
    $( "tr:odd" ).css( "background-color", "#ACE6CB" )
    </script>
于 2014-03-17T04:11:44.943 回答