上一篇文章中我們了解了定位元素背景圖像的方法，請看《一招搞定css定位元素的背景圖像》。這次我們來了解設定背景圖重複的方法，有需要的可以參考參考。
當我們有一張背景圖的時候，如何設定這個背景圖的平鋪方式呢？
先來看一個小栗子，就拿上篇的程式碼吧。
<style>
div{
background-image: url("images/3.jpg");
background-repeat:no-repeat;
background-position:left;
}
</style>
</head>
<body><div>
<p>为了显示，表明这个一个p元素</p>
<p>为了显示，表明这个一个p元素</p>
<p>为了显示，表明这个一个p元素</p>
<p>为了显示，表明这个一个p元素</p>
<p>为了显示，表明这个一个p元素</p>
<p>为了显示，表明这个一个p元素</p>
<p>为了显示，表明这个一个p元素</p>
<p>为了显示，表明这个一个p元素</p>
<p>为了显示，表明这个一个p元素</p>
<p>为了显示，表明这个一个p元素</p>
<p>为了显示，表明这个一个p元素</p>
<p>为了显示，表明这个一个p元素</p>
<p>为了显示，表明这个一个p元素</p>
<p>为了显示，表明这个一个p元素</p>
</div>
</body>這個結果是
我們可以看到，這個小例子中的背景圖一直都是這張，但是圖片出現的次數發生了改變，這是什麼原因呢？可以看到，我們修改了background-repeat這個屬性的值，今天我們就來談談這個屬性。
background-repeat屬性設定是否及如何重複背景圖片。背景影像可以沿著水平軸，垂直軸，兩個軸重複，或完全不重複。預設地，背景圖像在水平和垂直方向上重複。重複的圖像被剪為元素的大小，但它們可以縮放 (使用round) 或均勻地分佈 (使用space)。
此屬性從原始影像開始重複，原始影像由background-image定義，並根據background-position的值放置。
在這個屬性中一共有四個屬性值，分別是repeat，repeat-x，repeat-y和no -repeat。其中，repeat代表背景影像將在垂直方向和水平方向重複；repeat-x代表背景影像將在水平方向重複；repeat-y代表背景影像將在垂直方向重複；no-repeat代表背景影像不重複，只出現一次。
推薦學習：css影片教學
#以上是如何使用css設定背景圖的重複與否的詳細內容。更多資訊請關注PHP中文網其他相關文章！
