All Angular CSS database DevOps GraphQL HTML JavaScript Linux Next.js Node.js Python Ruby Rust TypeScript WordPress WordPress主機 WordPress外掛 WordPress架設網站 前端筆記 後端筆記 架設網站的方法 演算法 網站原理 網站知識 資工 資料結構 開發工具 開箱 閒聊 新增圖片時,該用HTML的img,還是CSS的background-image? Date July 18, 2020 在寫前端的時候,插入圖片的方式有兩種:在HTML的<img>;另一種則是在CSS屬性中設定background-image,一直以來都分不太清楚甚麼時候該用哪個,今天就來好好整理一下! 1. HTML的<img> 首先來看看根據W3Schoolshools的說明,<img>有哪幾個attributes吧! 1.1 src 最基本的,放置圖片的來源,可以是位於該專案的檔案路徑,也可以是URL。 檔案路徑: <img src=”./images/001.jpg”>… 用 CSS 製作動畫的 3 種方式: CSS transition, CSS transform, CSS animation Date July 2, 2020 今天要來筆記一下該如何用 CSS 製作動畫,爬了一些文發現這篇:CSS3 中的動畫介紹 算是介紹比較完整的,再把製作動畫的方式步驟化方便自己之後需要應用。 不過今天的筆記就先排除效能,改天有空再來寫一篇關於動畫與瀏覽器效能之間的關係。 1. CSS 製作動畫的三種方式: 1.1…
新增圖片時,該用HTML的img,還是CSS的background-image? Date July 18, 2020 在寫前端的時候,插入圖片的方式有兩種:在HTML的<img>;另一種則是在CSS屬性中設定background-image,一直以來都分不太清楚甚麼時候該用哪個,今天就來好好整理一下! 1. HTML的<img> 首先來看看根據W3Schoolshools的說明,<img>有哪幾個attributes吧! 1.1 src 最基本的,放置圖片的來源,可以是位於該專案的檔案路徑,也可以是URL。 檔案路徑: <img src=”./images/001.jpg”>…
用 CSS 製作動畫的 3 種方式: CSS transition, CSS transform, CSS animation Date July 2, 2020 今天要來筆記一下該如何用 CSS 製作動畫,爬了一些文發現這篇:CSS3 中的動畫介紹 算是介紹比較完整的,再把製作動畫的方式步驟化方便自己之後需要應用。 不過今天的筆記就先排除效能,改天有空再來寫一篇關於動畫與瀏覽器效能之間的關係。 1. CSS 製作動畫的三種方式: 1.1…