iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 26
1
Modern Web

HTML 與 CSS 學習筆記系列 第 26

Day26 - HTML 與 CSS (8) - 背景圖片

背景圖片

  • background-image:使用 url(pic路徑) 來顯示圖片
    • background-image: url(./img/logo.png);
    • 若圖片尺寸大小 < 區塊設定尺寸,預設會重複排列
  • background-repeat:設定重複狀況,透過重複減少圖片載入
    • repeat:重複 x (水平)和 y (垂直)
    • no-repeat:不重複
    • repeat-x:只重複 x (水平)
    • repeat-y:只重複 y (垂直)
  • background-color:設定背景顏色,輸入顏色如 red
  • background-position:設定 background-image 圖片位置,預設為水平與垂直皆置中 center
    • 設定 2 組:左右 left or right 與 上下 top or bottom 各1 個
    • 設定 1 組:未設定的那組為置中 center,因此若只有 left 代表靠左並且上下置中
    • 直接指定位置: 10px30%
  • background:可以綜合上述的全部屬性,寫在一起,以空格隔開
    • background: url(./img/logo.png) no-repeat left top

補充資料與其他的用法,可以參考金魚系列的 CSS 系列文

  • 金魚都能懂的CSS必學屬性

  • 圖片的格式

    • jpg:無透明背景
    • gif:有透明背景,有動畫效果,只有 256 色
    • png:有透明背景,若為 png8 為 256 色(2 的 8 次方),pn24 為 2 的 24 次方種色彩

參考資料

次回

圖片的部分似乎比我預期的快,預計說明 head 的部分


上一篇
Day25 - CSS (6) - 漸層、權重
下一篇
Day27 - HTML 與 CSS (9) - head
系列文
HTML 與 CSS 學習筆記31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言