内容营销

如何在明暗模式下使用 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 首席营销官是 开放洞察 和创始人 Martech Zone。 道格拉斯帮助了数十家成功的 MarTech 初创公司,协助进行了超过 5 亿美元的 MarTech 收购和投资尽职调查,并继续协助公司实施和自动化其销售和营销策略。 道格拉斯是国际公认的数字化转型和 MarTech 专家和演讲者。 道格拉斯还是一本傻瓜指南和一本商业领导力书籍的出版作者。

相关文章

返回顶部按钮
关闭

检测到Adblock

Martech Zone 我们能够免费为您提供这些内容,因为我们通过广告收入、联属链接和赞助从我们的网站中获利。 如果您在浏览我们的网站时删除广告拦截器,我们将不胜感激。