background-repeat

設置背景圖片時,默認把圖片在水平和垂直方向平鋪以鋪滿整個元素。

這也許是你需要的,但是有時會希望圖片只出現一次,或者只在一個方向平鋪。以下為可能的設置值和結果:

background-repeat: repeat; /* 默認值,在水平和垂直方向平鋪 */

background-repeat: no-repeat; /* 不平鋪。圖片只展示一次。 */

background-repeat: repeat-x; /* 水平方向平鋪(沿 x 軸) */

background-repeat: repeat-y; /* 垂直方向平鋪(沿 y 軸) */

background-repeat: inherit; /* 繼承父元素的 background-repeat 屬性*/

CSS2中當圖片平舖時,會被元素在末端截斷。 CSS3 引入了兩個屬性來修正這個問題:

* space: 應用同等數量的空白到圖片之間,直到填滿整個元素

* round: 縮小圖片直到正好平鋪滿元素

關於 background-repeat: space; 的一個例子,可以在 CSS3 規則網站看到。