內容營銷

如何在明暗模式下使用 CSS Sprites

的CSS 精靈是網絡開發中用來減少精靈數量的技術 HTTP 網頁發出的請求。 它們涉及將多個小圖像組合成一個較大的圖像文件,然後使用 CSS 將該圖像的特定部分顯示為網頁上的單個元素。

使用 CSS sprites 的主要好處是它們可以幫助改善網站的頁面加載時間。 每次在網頁上加載圖像時,都需要一個單獨的 HTTP 請求,這會減慢加載過程。 通過將多個圖像組合成單個 sprite 圖像,我們可以減少加載頁面所需的 HTTP 請求數。 這可以使網站更快、響應更快,尤其是對於具有許多小圖像(如圖標和按鈕)的網站。

使用 CSS 精靈還允許我們利用瀏覽器緩存。 當用戶訪問網站時,他們的瀏覽器將在第一次請求後緩存精靈圖像。 這意味著後續對使用 sprite 圖像的網頁上的單個元素的請求將快得多,因為瀏覽器的緩存中已經有該圖像。

CSS Sprites 不再像以前那樣流行

CSS sprites 仍然常用於提高站點速度,儘管它們可能不像以前那樣流行。 因為高帶寬, 網頁 格式, 圖像壓縮, 內容分發網絡 (), 延遲加載強緩存 技術,我們在網絡上看到的 CSS 精靈不像以前那麼多了……儘管這仍然是一個很好的策略。 如果您有一個引用大量小圖像的頁面,它會特別有用。

CSS 精靈示例

要使用 CSS 精靈,我們需要使用 CSS 定義每個單獨圖像在精靈圖像文件中的位置。 這通常是通過設置 background-imagebackground-position 使用 sprite 圖像的網頁上每個元素的屬性。 通過在 sprite 中指定圖像的 x 和 y 坐標,我們可以將單個圖像顯示為頁面上的單獨元素。 這是一個例子……我們在一個圖像文件中有兩個按鈕:

CSS 精靈示例

如果我們想讓左邊的圖片顯示出來,我們可以給div提供 arrow-left 作為類,所以坐標只顯示那一側:

.arrow-left {
  width: 200px;
  height: 200px;
  background: url('sprite.png') no-repeat 0 0;
}

如果我們希望顯示右箭頭,我們可以將 div 的類設置為 arrow-right.

.arrow-right {
  width: 200px;
  height: 200px;
  background: url('sprite.png') no-repeat -200px 0;
}

用於明暗模式的 CSS Sprites

一個有趣的用途是使用明暗模式。 也許您的徽標或圖像上有深色文本,但在深色背景上是看不到的。 我做了一個按鈕的例子,它有一個白色中心用於亮模式和一個深色中心用於暗模式。

css sprite 光暗

使用 CSS,我可以根據用戶使用的是淺色模式還是深色模式來顯示適當的圖像背景:

:root {
  --sprite-image: url('sprite.png');
  --sprite-width: 200px;
  --sprite-height: 400px;
  --sprite-x-light: 0;
  --sprite-y-light: 0;
  --sprite-x-dark: -200px;
  --sprite-y-dark: 0;
}

@media (prefers-color-scheme: dark) {
  :root {
    --sprite-x-light: 200px;
    --sprite-x-dark: 0;
  }
}

.icon {
  width: 32px;
  height: 32px;
  background: var(--sprite-image) no-repeat var(--sprite-x-light) var(--sprite-y-light);
}

.icon:hover {
  background-position: var(--sprite-x-dark) var(--sprite-y-dark);
}

例外:電子郵件客戶端可能不支持此

一些電子郵件客戶端,例如 Gmail,不支持 CSS 變量,在我提供的示例中使用這些變量在明暗模式之間切換。 這意味著您可能需要使用替代技術在不同版本的精靈圖像之間切換以適應不同的配色方案。

另一個限制是一些電子郵件客戶端不支持 CSS 精靈中常用的某些 CSS 屬性,例如 background-position. 這會使在 sprite 圖像文件中定位單個圖像變得困難。

Douglas Karr

Douglas Karr 是 CMO 的 開放洞察 和創始人 Martech Zone。 道格拉斯幫助了數十家成功的 MarTech 新創公司,協助進行了超過 5 億美元的 MarTech 收購和投資盡職調查,並繼續協助公司實施和自動化其銷售和行銷策略。 道格拉斯是國際公認的數位轉型和 MarTech 專家和演講者。 道格拉斯也是一本傻瓜指南和一本商業領導書的出版作者。

相關文章

返回頂部按鈕
關閉

檢測到Adblock

Martech Zone 我們能夠免費為您提供這些內容,因為我們通過廣告收入、聯屬鏈接和讚助從我們的網站中獲利。 如果您在瀏覽我們的網站時刪除廣告攔截器,我們將不勝感激。