用css怎么实现背景色交叉显示？

html-css047

用css怎么实现背景色交叉显示？,第1张

其实很简单啊，通过css 的background: linear-gradient() 就可以实现了，最后一个其实也是可以实现的，先写一个从上到下的重复线性渐变，然后再写一个从做到右的重复线性渐变，第二个颜色设置透明，然后通过定位在一起就可以实现了。都是一些比较简单的效果。

CSS设置多列每隔交叉颜色的方法：

在css里面写奇数和偶数行的判断逻辑，并给出不同的颜色值即可。

代码如下：

<html>

<head>

<title>Table隔行变色</title>

<style>

<!--

  tr{

      background: #f00//设置背景色为red，红色

  }

  tr:nth-child(2n){

      background: #ccc

  }

  tr{

      background-color: expression((this.sectionRowIndex % 2 == 0) ?   "#f00" : "#ccc" )//奇数行设置为f00，偶数行设置为ccc

  }

-->

</style>

</head>

<body>

<table>

  <tr><td>111111111</td></tr>

  <tr><td>222222222</td></tr>

  <tr><td>333333333</td></tr>

  <tr><td>444444444</td></tr>

</table>

</body>

</html>

运行效果：