iT邦幫忙

2021 iThome 鐵人賽

DAY 6
0
Modern Web

Modern CSS 超詳細新手攻略系列 第 10

[13th-鐵人賽]Day 10:Modern CSS 超詳細新手攻略 - background

一個單調的網頁,配上精美的背景圖片將帶來意想不到的驚豔,但在加入背景圖片可不是這麼簡單,今天來介紹關於背景的各種屬性!

  1. background-color
    背景不只可以放上圖片,也可以用顏色來增加色彩,單色或漸層都可以
    https://ithelp.ithome.com.tw/upload/images/20210916/20141395NQ7WZG3qpM.jpg
    https://ithelp.ithome.com.tw/upload/images/20210916/20141395ZUyYvgIbxY.jpg

  2. background-image
    常用做法是使用url()加上圖片路徑
    https://ithelp.ithome.com.tw/upload/images/20210916/20141395NWSEV7RavE.jpg

  3. background-repeat
    設定完背景圖片時,因為圖片尺寸不符合,有時會出現圖片重複的情況,可以在這個屬性調整
    https://ithelp.ithome.com.tw/upload/images/20210916/20141395tTTsa7HVpk.jpg
    可以依水平或垂直軸做repeat,重複的圖片間須有空格即可以使用round,或是no-repeat來取消重複

  4. background-position
    這個屬性可以調整背景圖片的位置,可以以數值或方向設定
    https://ithelp.ithome.com.tw/upload/images/20210916/20141395XcOqe9BD5h.jpg
    center指的是將圖片居中,而且其他方向指的是為該方向為基準邊,而只寫一個方向,另一方向預設將為center
    https://ithelp.ithome.com.tw/upload/images/20210916/20141395XQ8zeWPk6p.jpg
    可設定更精準的數值,指的是bottom往上推10px開始算起。請注意當一邊方向已寫top,另一方不可再寫top或bottom。

  5. background-size
    希望調整圖片大小時可以使用該屬性,可以設定為關鍵字或是數值
    https://ithelp.ithome.com.tw/upload/images/20210916/20141395demclQzkMI.jpg
    a. cover 當圖片小於內容,並且不希望repeat的情況下,此屬性值可將圖片放大至內容大小(可能失真)
    b. contain 當圖片大於內容,希望圖片可完整呈現,此屬性值可將圖片縮小至內容大小
    c. 設定數值若只寫1個,即為寬度,高度將預設為auto。若寫2個數值,即前面是寬度、後面是高度。

  6. background-attachment
    若內容可以滾動,可設定滾動內容時圖片是否跟著滾動
    https://ithelp.ithome.com.tw/upload/images/20210916/201413958DglBHfl8O.jpg
    a. scroll: 背景隨外圍頁面滾動而移動
    b. fixed: 背景完全固定,不隨內容滾動
    c. local: 背景隨著自身內容滾動

https://ithelp.ithome.com.tw/upload/images/20210916/20141395eX05aidU7N.jpg
background可以像這樣簡寫成一行屬性(順序隨意,但size需放於position之後,並以/分開),但我個人認為這樣易讀性較低

https://ithelp.ithome.com.tw/upload/images/20210916/20141395s6QsAvZpJM.jpg
可設定多個背景,使用逗號隔開即可


上一篇
[13th-鐵人賽]Day 9:Modern CSS 超詳細新手攻略 - Specificity
下一篇
[13th-鐵人賽]Day 11:Modern CSS 超詳細新手攻略 - Position (一)
系列文
Modern CSS 超詳細新手攻略11
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言