1

これは、w3s Web サイトの 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

これは、CSS3 を使用して非常に簡単に行うことができます。

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

実際、テキストの色はそのままです。ただし、opacity常に要素全体 (backgrounds、borders、text-colors) とそのすべての子孫に影響します。透明な背景のみが必要な場合は、その単一要素の背景にのみ影響する「透明度」チャネルを導入する背景に 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 に答える
0

これは役立つかもしれません、

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