第 12 屆 iThome 鐵人賽

DAY 19

Modern Web

金魚都能懂的CSS必學屬性系列第 19 篇

Background-repeat- 金魚都能懂的CSS必學屬性

12th鐵人賽 css教學 css 網頁教學金魚都能懂

CSScoke

2020-10-04 21:03:14

16353 瀏覽

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;

呈現效果

想要 垂直重複 的話，則可以使用 repeat-y

呈現效果

repeat-x 與 repeat-y 其實是縮寫

實際上repeat-x 與 repeat-y這兩個關鍵字算是縮寫值，如果我們把background-repeat拆成X與Y兩個軸向來看的話，那麼我們的原始碼就可以這樣去思考

background-repeat: X軸 Y軸;

是的！是不是很像我們之前講到的background-position的語法？如果是這樣的概念的話，那麼background-repeat: repeat-x; 就等同於下方原始碼

background-repeat: repeat no-repeat;

而 background-repeat: repeat-y 則等同於下方這樣的寫法了

background-repeat: no-repeat repeat;

這樣看來可以玩的效果就很多了，先看看其他的關鍵字有些甚麼作用吧

space 與 round 好方便

background-repeat 中比較特別的就是 space 與 round 這兩個關鍵字了，先來看看兩個關鍵字的特性是甚麼

space：盡可能在不裁切、不變形、不縮放圖片的情況下，最大量化的重複背景圖片，若剩餘空間無法拼接，則自動均分空白空間。
round：使用縮放或變形的方式，讓背景圖片在不裁切的情況下填滿空間。

看了這樣的特性說明，應該就可以理解到那個效果了(屁啦！)，讓我們來看看示範吧，以下示範將使用以下原始碼設定做測試，測試期間僅更改 background-repeat 的值。

CSS

div{
  width: 900px;
  height: 500px;
  border:5px solid gray;
  background-image: url("https://ithelp.ithome.com.tw/upload/images/20201004/20112550D2xNzTMb4R.png");
  background-repeat: repeat;
}

repeat效果(對比用)

可以看到repeat的效果在重複拼貼時，會因為空間不是剛好背景圖片的整除倍數，所以會出現背景圖被裁切的狀況。

space效果

可以看到背景圖的尺寸與比例沒有任何變化，並且自動的等距分配以填滿空間。

round效果

背景圖片已經被縮放與變形了，但仍就可以整個剛好的拼貼在空間中。

看到這樣的效果，是不是覺得這種自動貼滿的效果，很適合某些我們視覺設計的需求呢！

一個值不嫌少，兩個值恰恰好

有了前面的觀念之後，我們就可以來寫一些應用了，通常我們都只會使用一個值來做背景的重複設定，但倘若可以同時使用兩個值的話，我們就能做出更完美的背景拼貼了！多數的網頁切版是不會去設定區塊的高度的，這時因為高度彈性的關係，所以區塊的背景就很容易不小心出現裁切的狀況，像是下方這樣

HTML

<div></div>

CSS

div{
  width: 900px;
  height: 500px;
  border:5px solid gray;
  background-image: url("https://ithelp.ithome.com.tw/upload/images/20201004/20112550D2xNzTMb4R.png");
  background-repeat: repeat-y;
}

呈現效果

難過啊！如果可以不要切掉金魚多好啊！此時我們換個CSS寫法就可以搞定了

div{
  width: 900px;
  height: 500px;
  border:5px solid gray;
  background-image: url("https://ithelp.ithome.com.tw/upload/images/20201004/20112550D2xNzTMb4R.png");
  background-repeat: no-repeat round;
}

呈現效果

完美！就是要這樣啦！寫到這我想不用我多說了，各位開發者應該可以想到更多應用面的部分了，就趕快去試試看吧，金魚都能懂的CSS必學屬性，我們下一篇見啦~

「金魚都能懂的CSS選取器」已集結成書，並於書中添加一些新篇章及細節補充，有興趣的朋友可至天瓏書局選購，感謝各位支持
購書連結 https://www.tenlong.com.tw/products/9789864344994?list_name=b-r30-zh_tw

讓我們好好善用CSS選取器吧