如何在html中重複圖像

Question

我有以下圖像作爲png文件。 http://pctechtips.org/pics/dot-line.png，我想爲我的井字頭部分創建一條水平線。我認爲最好將圖像分解成更小的元素，而不是爲整個標題創建圖像。因此，調整大小並適應不同的屏幕尺寸將很容易。反正我怎樣才能使它重複十筆：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

在你的頭，去掉「點」的形象，並用一個小時（或您選擇的另一個元素）替換它。

<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