首頁 > web前端 > css教學 > 網頁文檔背景圖片的重複方式有哪些

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

醉折花枝作酒筹
發布: 2023-01-07 11:42:56
原創
3661 人瀏覽過

網頁文件背景圖像的重複方式有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中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板