html - 如何使图像在html中重复

Question

我有以下图片作为 png 文件。 http://pctechtips.org/pics/dot-line.png我想为我的井字头部分创建一条水平线。我认为最好将图像分解成更小的元素，而不是为整个标题使用图像；因此，调整大小并适应不同的屏幕尺寸将很容易。无论如何，我怎样才能让它重复 X.pen: https://codepen.io/zentech/pen/xLRzGrhtml

<div class="container">
  <!-- header -->
  <div class="header">
    <img src="http://pctechtips.org/pics/header-logo-tictactoe.png">
    <img src="http://pctechtips.org/pics/dot-line.png">
  </div>
  <div class="tictactoe">      
    <!-- first row (3 square) -->
    <div class="row">
      <div id="0" class="square right bottom"></div><!-- 
      --><div id="1" class="square right bottom"></div><!--
      --><div id="2" class="square bottom"></div>      
    </div>

    <!-- second row (3 square) -->
    <div class="row">
      <div id="3" class="square right bottom"></div><!--
      --><div id="4" class="square right bottom"></div><!--
      --><div id="5" class="square bottom"></div>      
    </div> 

    <!-- third row (3 square) -->
    <div class="row">
      <div id="6" class="square right"></div><!--
      --><div id="7" class="square right"></div><!--
      --><div id="8" class="square"></div>      
    </div>     
  </div> 
  <div class="controls">
    <h2 id="message">Message:</h2>
    <button type="button" class="resetGame">Reset Game</button>
  </div>
</div>

Answer 1

在您的标题中，删除“点”图像并将其替换为 hr(或您选择的其他元素)。

<div class="header">
    <img src="http://pctechtips.org/pics/header-logo-tictactoe.png">
    <hr />
  </div>

然后在您的 CSS 中，您可以像这样设置 hr 的样式(给定 50 像素的高度以匹配点图像的高度):

hr {
  height: 50px;
  background: url('http://pctechtips.org/pics/dot-line.png') 50% 50% repeat-x;
  border: none;
}

https://codepen.io/anon/pen/Vzrjjj