如何在明暗模式下使用 CSS Sprites
的CSS 精灵是网络开发中用来减少精灵数量的技术 HTTP 网页发出的请求。 它们涉及将多个小图像组合成一个较大的图像文件,然后使用 CSS 将该图像的特定部分显示为网页上的单个元素。
使用 CSS sprites 的主要好处是它们可以帮助改善网站的页面加载时间。 每次在网页上加载图像时,都需要一个单独的 HTTP 请求,这会减慢加载过程。 通过将多个图像组合成单个 sprite 图像,我们可以减少加载页面所需的 HTTP 请求数。 这可以使网站更快、响应更快,尤其是对于具有许多小图像(如图标和按钮)的网站。
使用 CSS 精灵还允许我们利用浏览器缓存。 当用户访问网站时,他们的浏览器将在第一次请求后缓存精灵图像。 这意味着后续对使用 sprite 图像的网页上的单个元素的请求将快得多,因为浏览器的缓存中已经有该图像。
CSS Sprites 不再像以前那样流行
CSS sprites 仍然常用于提高站点速度,尽管它们可能不像以前那样流行。 因为高带宽, 网页 格式, 图像压缩, 内容分发网络 (加), 延迟加载及 强缓存 技术,我们在网络上看到的 CSS 精灵不像以前那么多了……尽管这仍然是一个很好的策略。 如果您有一个引用大量小图像的页面,它会特别有用。
CSS 精灵示例
要使用 CSS 精灵,我们需要使用 CSS 定义每个单独图像在精灵图像文件中的位置。 这通常是通过设置 background-image
和 background-position
使用 sprite 图像的网页上每个元素的属性。 通过在 sprite 中指定图像的 x 和 y 坐标,我们可以将单个图像显示为页面上的单独元素。 这是一个例子……我们在一个图像文件中有两个按钮:
如果我们想让左边的图片显示出来,我们可以给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,我可以根据用户使用的是浅色模式还是深色模式来显示适当的图像背景:
: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 图像文件中定位单个图像变得困难。