修改透過 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] 移除陣列物件裡有重複的值的方法

你可能也會喜歡的

CSS 的圖層混合效果- mix-blend-mode 與 background-blend-mode

[CSS] 設定 focus 後讓上層元素改變樣式的選擇器- :focus-within

避免讀取 CSS 時因為外部檔案而造成讀取阻塞的現象，加速網頁開啟

[WordPress] 透過 wp_enqueue_style() 即時更新 style.css 設定的樣式

純 CSS 的樹狀圖- Treeflex

CSS Values- 線上 CSS 語法展示與查詢工具

課程推薦

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

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

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

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

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