多尺度视网膜图像增强_具有图像设置的高效视网膜背景

最新推荐文章于 2022-12-08 14:34:30 发布

cungui5726

最新推荐文章于 2022-12-08 14:34:30 发布

阅读量130

点赞数

文章标签： java python css post html

原文链接：https://thenewcode.com/1118/Efficient-Retina-Backgrounds-with-image-set

版权

多尺度视网膜图像增强

While illustrative images are now well-served in HTML5 and CSS with regards to high-DPI displays, with broad browser support for the picture element, srcset and sizes, Retina background images have been largely neglected during these advances. As background images are often quite large (in both pixel count and file size), this is particularly bothersome. While there has been an intermediate solution available for a long time, there’s now an even better one.

同时说明图像是现在服务良好HTML5和CSS至于高DPI显示器，与广泛的浏览器支持picture元素， srcset和sizes ，视网膜背景图片已经在很大程度上这些进展中被忽视。由于背景图像通常很大(像素数和文件大小都很大)，因此特别麻烦。尽管存在很长一段时间的中间解决方案，但现在有了更好的解决方案。

@media解决方案 (@media Solutions)

A high-DPI image can be used on the appropriate screens using a @media query, as discussed in the previous article. Given an ordinary 72DPI image named automobile.jpg with a high-resolution version named automobile-2x.jpg, we can switch between the two being applied to the <body> with:

如上一篇文章所述，可以使用@media查询在适当的屏幕上使用高DPI图像。给出一个普通的图像72DPI名为automobile.jpg具有高分辨率版本名为automobile-2x.jpg ，我们可以被施加到在两者之间切换<body>用：

body {
    background-image: url("automobile.jpg");
    background-size: cover;
}

@media (-webkit-min-device-pixel-ratio: 2), 
(min-resolution: 192dpi) { 
    body {
        background-image: url("automobile-2x.jpg");
    }
}

图像集 (image-set)

A more concise and efficient method can be used with image-set. Because it is only currently supported in Webkit-derived browsers, it requires an approximate vendor prefix:

可以对image-set使用更简洁有效的方法。因为它仅在Webkit派生的浏览器中当前受支持，所以它需要一个近似的供应商前缀：

body {
    background-image: url("automobile.jpg");
    background-image: -webkit-image-set(url("automobile.jpg") 1x, url("automobile-2x.jpg") 2x );
    background-size: cover;
}

You might note that the syntax is very much like that for the x designator in srcset, used for ordinary responsive images.

您可能会注意到，语法非常类似于srcset的x指示符 (用于普通的响应图像)。

结论 (Conclusion)

image-set() is a promising method to use for Retina background images, but needs careful consideration: you can either use the now-traditional @media query to cover all browsers, or image-set() with a fallback, which will cover non-supporting browsers with a standard resolution image.

image-set()是用于视网膜背景图像的一种有前途的方法，但是需要仔细考虑：您可以使用现在传统的@media查询覆盖所有浏览器，也可以使用具有后备功能的image-set()来覆盖不支持标准分辨率图像的浏览器。