iT邦幫忙

2021 iThome 鐵人賽

DAY 9
0
自我挑戰組

從零開始前端學習(HTML、CSS、JavaScript) 系列 第 9

Day 09 CSS <背景屬性>

CSS背景屬性 可以給頁面元素添加背景樣式
背景屬性可設置背景顏色背景圖片背景平舖背景圖片位置圖像固定等等

1.背景顏色
background-color屬性可定義元素的背景顏色

background-color:顏色值;

background-color:red;

默認為透明值: transparent

2.背景圖片

background-image屬性可定義元素的背景圖片

logo或一些裝飾性的小圖片或是超大的背景圖片是常見的使用情況
優點是較於便於控制位置

background-image : none|url(url)
默認值為none(沒有圖片)

3.背景平舖
background-repeat屬性定義背景圖片的平鋪

background-repeat:repeat|no-repeat|repear-x|repeat-y

repeat (背景圖像片在縱向和橫向上的平鋪 (默認))
no-repeat(背景圖片不平鋪)
repeat-x (背景圖片在x軸(橫向)平舖
repeat-y (背景圖片在y軸(縱向)平舖
round (使用縮放或變形的方式,讓背景圖片在不裁切的情況下填滿背景。)

4.背景圖片位置
利用background-position:x y進行調整背景圖片位置
參數代表的意思是X座標或Y座標 可以使用方位名詞或是精確單位

backgorund-position:x y;

length 百分數組成的長度值
position top|center|bottom|left|right|  (方位名詞)

備註 :

  • 參數是方位名詞時

  • 如果指定的兩個值都是方位名詞,則兩個值前後順序無關

  • 比如left top和top left效果是一致

  • 只指定了一個方位 另外一個值省略,則第二個值默認居中對齊

  • 參數是精確單位時

  • 若是精確座標 前一定為X座標 後一定為Y座標

  • 若只指定一個數值 該數值一定為X 另一個為居中

  • 參數是混和單位時

  • 使用方位名詞時看則精確單位 ex: 20px center

  • 第一個值為X座標 第二個值為Y座標

5.背景圖像固定
background-attachment 屬性設置背景圖像是否固定或隨著頁面的其餘部分滾動
且後期可以製作視差滾動的效果

background-attachment: scroll | fixed

scroll = 背景圖像隨對象內容進行滾動
fixed = 背景圖像固定

6.背景複合寫法
以上背景屬性皆可簡寫在一個屬性background中去進行設定背景元素
普遍使用的約定順序為:

background:背景顏色 背景圖片地址 背景平鋪 背景圖像滾動 背景圖片位置;

background:red url(image.jpg) repeat-y fixed top;

7.背景色半透明做法
CSS3為我們提供了背景顏色半透明的效果

background: rgba(0,0,0,0.3);

- 最後一個參數是alphe透明度 取值在0-1之間
- 習慣把0.3的0省略掉
- 注意: 背景半透明是指盒子背景半透明 內容不影響

背景屬性 codepen:
可自己copy code 帶入圖片嘗試

https://ithelp.ithome.com.tw/upload/images/20210909/20141125WlKDGmopE0.png


上一篇
Day 08 CSS <文本屬性>
下一篇
Day 10 CSS <元素顯示模式>
系列文
從零開始前端學習(HTML、CSS、JavaScript) 30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言