iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 19
9
Modern Web

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

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

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的圖片來當示範

示範用圖片

https://ithelp.ithome.com.tw/upload/images/20201004/20112550D2xNzTMb4R.png

接著我們寫一段示範用的原始碼看看效果

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");
}

呈現效果

https://ithelp.ithome.com.tw/upload/images/20201004/20112550q9MyakedRY.png

可以看到圖片整個鋪滿了我們的區塊,並且可以看到Amos沒有寫 background-repeat: repeat; ,就達到了這樣的效果,倘若我們希望讓它 水平重複 的話,我們可以設定

background-repeat: repeat-x;

呈現效果

https://ithelp.ithome.com.tw/upload/images/20201004/201125509u9EgtqXgy.png

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

呈現效果

https://ithelp.ithome.com.tw/upload/images/20201004/20112550vSsGmB51mF.png

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 中比較特別的就是 spaceround 這兩個關鍵字了,先來看看兩個關鍵字的特性是甚麼

  • 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的效果在重複拼貼時,會因為空間不是剛好背景圖片的整除倍數,所以會出現背景圖被裁切的狀況。

https://ithelp.ithome.com.tw/upload/images/20201004/20112550WXPlb6xdym.png

space效果

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

https://ithelp.ithome.com.tw/upload/images/20201004/20112550hE2i6Wui1y.png

round效果

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

https://ithelp.ithome.com.tw/upload/images/20201004/20112550U3hJtmcoiU.png

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

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

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

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;
}

呈現效果

https://ithelp.ithome.com.tw/upload/images/20201004/20112550csnzVNxNve.png

難過啊!如果可以不要切掉金魚多好啊!此時我們換個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;
}

呈現效果

https://ithelp.ithome.com.tw/upload/images/20201004/20112550IIn8kw0yvB.png

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


「金魚都能懂的CSS選取器」已集結成書,並於書中添加一些新篇章及細節補充,有興趣的朋友可至天瓏書局選購,感謝各位支持
購書連結 https://www.tenlong.com.tw/products/9789864344994?list_name=b-r30-zh_tw
https://ithelp.ithome.com.tw/upload/images/20200917/20112550bxAFk2frMp.jpg
讓我們好好善用CSS選取器吧


金魚都能懂的教學系列

鐵人雙主題挑戰中,歡迎訂閱一波

金魚都能懂的Bootstrap5網頁框架開發

立刻訂閱 CSS可樂的網站/頻道享受精彩文章

Line搜尋「@CSScoke」加入CSS可樂公開帳號,可以收到 Amos 第一手資訊喔
CSS 可樂部落格
CSS coke 的 Youtube 直播頻道
快按此訂閱 CSS coke 的頻道接收最新教學
/images/emoticon/emoticon12.gif


上一篇
Background-position- 金魚都能懂的CSS必學屬性
下一篇
Background-size- 金魚都能懂的CSS必學屬性
系列文
金魚都能懂的CSS必學屬性31

1 則留言

0
Alice Chiu
iT邦新手 5 級 ‧ 2020-10-05 14:13:10

space跟round真的沒用過
學到了~

我要留言

立即登入留言