Question

我将以下图像作为png文件。 http://pctechtips.org/pics/dot-line.png我想为我的tic tac toe header部分创建一条水平线。我认为最好将图像分解为更小的元素，而不是为整个标题创建图像;因此，可以轻松调整大小并适应不同的屏幕尺寸。无论如何我怎么能让它重复X. pen：https://codepen.io/zentech/pen/xLRzGr HTML

<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的样式（给定高度为50px以匹配点图像的高度），如下所示：

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

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

如何在html中重复图像

1 个答案: