css 按钮图像_深入探讨：CSS4图像集

用于计算机设备的高清屏幕的新兴趋势已经改变了我们建立网站的方式，包括我们添加图像的方式。 过去，我们只需使用background-image并设置图像URL。

如今，这已不再重要，因为我们还需要提供针对高分辨率显示进行了优化的图像，否则该图像将看起来像素化或模糊。 因此，从技术上讲，我们需要两套图像，一套为常规尺寸，另一套为两倍尺寸。

在上一篇文章中，我们讨论了如何使用Media Query在高DPI屏幕上投放图像 。 但是，使用这种方法的缺点是，您需要为位于不同位置的单个选择器分别设置CSS规则。 如果要插入一堆背景图像，事情可能会变得过于复杂且难以维护。

因此，在本文中，我们将探讨实现此目的的另一种方法。 我们将研究CSS Image Set 。

CSS图像集功能

CSS图像集功能image-set()被分类为CSS Image Level 4 。 通过使用此功能，我们可以插入将设置为正常和高分辨率显示的多个图像。

除此之外，此功能还试图根据连接速度提供最合适的图像分辨率。 因此，无论屏幕分辨率如何，如果用户通过缓慢的Internet连接访问图像，则将传递较小尺寸的图像。

在撰写本文时，CSS Image Set还处于试验阶段。 它仅在Safari 6和Google Chrome 21中受支持，并以-webkit-image-set()为前缀。

像这样，在background-image属性中声明此函数，同时在函数中添加背景URL，后跟分辨率参数（对于正常显示为1x ，对于高分辨率显示为2x ）。

.selector {
	background-image: -webkit-image-set(url('../img/image-1x.jpg') 1x, url('../img/image-2x.jpg') 2x);
}

如前所述，由于这是试验性的，因此我们需要为不支持image-set()函数的浏览器提供一个备用。 因此，我们像这样在顶部添加一个background-image 。

.selector {
	background-image: url('../img/image-1x.jpg';
	background-image: -webkit-image-set(url('../img/image-1x.jpg') 1x, url('../img/image-2x.jpg') 2x);
}

我们已经为此代码创建了一个演示页面，您可以从以下链接中看到它。

• 观看演示
• 下载源

最终思想

image-set()函数似乎是高分辨率提供图像的有前途的解决方案。 但是，由于当前有限的浏览器支持， image-set()尚不准备在实时站点中实现。 另外，在不久的将来可能会改变实施方式。 有关此功能的更多参考，您可以转到W3C 的文档页面 。

翻译自: https://www.hongkiat.com/blog/css-image-set/