Liz's Blog

CSS/SCSS#2:background圖片全景

| Comments

HTML5 & CSS3套版提過如何利用HTML5 UP,雖然在全HTML的網頁框架下顯示沒有問題,但利用Ruby on rails的專案,可能還是會有些差異,以下是遇到的情況之一。

本來可以全景顯示的圖片變成只有左下角才顯示。

查了一下main.css檔案才發現問題出在background-size。

本來設定是background-size: 25em, 25em, auto, cover;
改成background-size: cover;就沒問題了。

在css3的圖片設定中,除了auto,也有length、percentage、cover、contain、initial、inherit等設定,可參考W3School說明。另外長度比例也有不同的表示方法,像是上面25em代表的是比目前字體大25倍,其他ex、ch、rem、vw、vh、vmin、vmax、%,請參考CSS Units說明。

對課程內容有興趣,請上嘉鼎資本投資事業管理術,免費註冊及觀看學習!

【延伸閱讀】

  1. 【好物推薦】嘉鼎資本投資事業管理術
  2. 【嘉鼎資本投資事業管理術】Woolworths (ASX: WOW)

Comments

comments powered by Disqus