Background-repeat | css背景填滿
background-repeat主要用途是讓背景圖片可以重複拼接,好能夠在背景圖片小於容器尺寸時,利用拼接的方式鋪滿整個容器範圍,background-repeatd主要是使用關鍵字設定,且僅需給予一個值,但特殊狀況下可給予兩個值,倘若是需要做到多重背景的話,則可利用「,」半型逗號來區隔更多組值,其語法如下background-repeat:repeat;background-repeat是一個CSS新手必學的屬性,主要是因為它太常被使用到了,background-repeat可以使用的值有以下幾種repeatno-repeatrepeat-xrepeat-yspaceroundinitialinherit其中較為常用到的大概就前四個,「s...
background-repeat主要用途是讓背景圖片可以重複拼接,好能夠在背景圖片小於容器尺寸時,利用拼接的方式鋪滿整個容器範圍,background-repeatd主要是使用關鍵字設定,且僅需給予一個值,但特殊狀況下可給予兩個值,倘若是需要做到多重背景的話,則可利用「,」半型逗號來區隔更多組值,其語法如下
background-repeat: repeat;background-repeat是一個CSS新手必學的屬性,主要是因為它太常被使用到了,background-repeat可以使用的值有以下幾種
repeat no-repeat repeat-x repeat-y space round initial inherit其中較為常用到的大概就前四個,「space」與「round」反倒較少見到有人使用。
背景重複的效果background-repeat的預設值是repeat,所以當我們對一個區塊設定了背景圖片之後,其預設的效果就是會鋪滿整個區塊空間,以下Amos使用一張200x133的圖片來當示範
示範用圖片
接著我們寫一段示範用的原始碼看看效果
HTML
<div></div>CSS
div{ width: 1000px; height: 500px; border:5px solid gray; background-image: url("https://ithelp.ithome.com.tw/upload/images/20201004/20112550D2xNzTMb4R.png"); }呈現效果
可以看到圖片整個鋪滿了我們的區塊,並且可以看到Amos沒有寫 background-repeat: repeat; ,就達到了這樣的效果,倘若我們希望讓它 水平重複 的話,我們可以設定
background-repeat: repeat-x;呈現效果
想要 垂直重複 的話...