PNG透明网格背景原理示意实例页面

展示

代码

• HTML：

  <div class="square"></div>

• CSS：

  .square {
      display: inline-block;
      width: 304px; height: 160px;
      background-color: #fff;
      background-image: linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%), linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%);
      background-size: 16px 16px;
      background-position: 0 0, 8px 8px;
  }