修改透過 CSS Pseudo Element(偽元素)讀取進來的圖片的大小

2022-02-21 14:52:41

我們在 CSS 可以透過Pseudo Element(偽元素)像是 ::before 或 ::after 來無中生有建立元素，具體都會搭配 content 屬性來應用。

那如果我們要把透過 url 讀進來的圖片修改大小的話，是沒辦法直接修改 width 或 height 的，但是是可以使用 css 的 transform: scale() 來調整大小就好了，像是：

.img::after {
    content: url('/images/dow.png');
    transform: scale(.5);
}

EmojiAll- 收錄完整的表情符號整理網站 [javascript] 移除陣列物件裡有重複的值的方法

你可能也會喜歡的

修改 html input placeholder 的顏色

CSS3 Patterns Gallery- 純 CSS 繪製的背景圖

在 Laravel 安裝 tailwindcss

Convert pixels to rem- 網頁 px 單位轉換 rem 的計算器

利用 javascript 在 css 設定 sticky 且區塊固定位置後也改變樣式

[WordPress Plugin] WPCode：方便的程式碼管理外掛，可方便的撰寫及管理 PHP、JS、CSS、HTML 等相關程式碼

課程推薦

AI工作術全面學習實戰營：6 堂精選課程，學會最好用 AI 工具，翻轉你的人生

《PChome雜誌》攜手 5 位在 AI 領域的專業講師，打造上述 6 堂實用課程，教你學會時下最好用的 AI 工具，導入生成式 AI 來產製工作內容，改造並升級你的工作流程。

輸入折扣碼 ZERO2024 還可以額外獲得 NT$400 優惠喔。

HTML與SEO實戰應用—並以ChatGPT助力提升網站品質與流量

本課程專為希望深入了解 HTML 並有效結合 SEO 策略的學員設計。我們將重點放在 HTML 的深度學習與應用上，同時穿插介紹如何透過搜索引擎優化提升網站能見度。透過即時互動式的直播教學，加上 ChatGPT 的輔助，您將學習到如何建立一個結構優良、美觀且符合 SEO 標準的網站。這不僅會提升網站的用戶體驗，還會大幅提高網站的搜索引擎排名，進而增加訪客流量和潛在客戶。