space和round背景平铺效果示意实例页面

展示

代码

• HTML：

  <h4>space</h4>
  <p class="space"></p>
  <p class="space"></p>
  <p class="space"></p>
  <h4>round</h4>
  <p class="round"></p>
  <p class="round"></p>
  <p class="round"></p>

• CSS：

  p {
      height: 4rem;
      background: url(1.jpg) center / auto 100%;
      margin-left: auto; margin-right: auto;
      outline: 1px dotted;
  }
  .space {
      background-repeat: space; 
  }
  .round {
      background-repeat: round;
      /* 保证兼容 */
      background-position: left;
  }
  p:nth-of-type(3n + 1) {
      width: 280px;
  }
  p:nth-of-type(3n + 2) {
      width: 120px;
  }
  p:nth-of-type(3n + 3) {
      width: 4rem;
  }