網頁文檔背景圖片的重複方式有哪些

網頁文件背景圖像的重複方式有1、不重複，no-repeat；2、背景圖像將在垂直方向和水平方向重複，repeat、3、橫向重複，repeat-x；4、縱橫重複，repeat-y。

本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。

背景影像的重複方式有「不重複」、「重複」、「橫向重複」及「縱橫重複」。

語法

background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: repeat;
background-repeat: no-repeat;

使用最多的可能就是上面這些，下面看看另兩種屬性值：

background-repeat: space;
background-repeat: round;

預設情況下，重複的圖像被剪裁為元素的大小，但它們可以縮放(使用 round) 或均勻地分佈(使用 space)。

round ： 隨著允許的空間在尺寸上的增長, 被重複的圖像將會伸展(沒有空隙), 直到有足夠的空間來添加一個圖像. 當下一個圖像被添加後, 所有的目前的影像會被壓縮來騰出空間。

space ： 圖像會盡可能得重複, 但是不會裁剪. 第一個和最後一個圖像會被固定在元素(element)的相應的邊上, 同時空白會均勻地分佈在圖像之間. background-position屬性會被忽視, 除非只有一個圖像能被無裁剪地顯示. 只在一種情況下裁剪會發生, 那就是圖像太大了以至於沒有足夠的空間來完整顯示一個圖像。

雙值語法

background-repeat: repeat space;
background-repeat: round space;
background-repeat: no-repeat round;

寫法和平常一樣，水平|垂直。

推薦學習：css影片教學

#

以上是網頁文檔背景圖片的重複方式有哪些的詳細內容。更多資訊請關注PHP中文網其他相關文章！