CSS 视网膜显示屏，高分辨率背景图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16154494/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Retina displays, high-res background images
提问by Dean Elliott
This might sound like a silly question.
这可能听起来像一个愚蠢的问题。
If I use this CSS snippet for regular displays (Where box-bg.pngis 200px by 200px);
如果我将此 CSS 片段用于常规显示（其中box-bg.png是 200 像素 x 200 像素）；
.box{
background:url('images/box-bg.png') no-repeat top left;
width:200px;
height:200px
}
and if I use a media query like this to target retina displays (With the @2x image being the high-res version);
如果我使用这样的媒体查询来定位视网膜显示（@2x 图像是高分辨率版本）；
@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
.box{background:url('images/[email protected]') no-repeat top left;}
}
Do I need to double the size of the .boxdiv to 400px by 400px to match the new high res background image?
我是否需要将.boxdiv的大小加倍到 400 像素乘 400 像素以匹配新的高分辨率背景图像？
回答by Turnip
Do I need to double the size of the .box div to 400px by 400px to match the new high res background image
我是否需要将 .box div 的大小加倍到 400px x 400px 以匹配新的高分辨率背景图像
No, but you do need to set the background-sizeproperty to match the original dimensions:
不，但您确实需要设置background-size属性以匹配原始尺寸：
@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
.box{
background:url('images/[email protected]') no-repeat top left;
background-size: 200px 200px;
}
}
EDIT
编辑
To add a little more to this answer, here is the retina detection query I tend to use:
为了给这个答案添加一点，这是我倾向于使用的视网膜检测查询：
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and ( min--moz-device-pixel-ratio: 2),
only screen and ( -o-min-device-pixel-ratio: 2/1),
only screen and ( min-device-pixel-ratio: 2),
only screen and ( min-resolution: 192dpi),
only screen and ( min-resolution: 2dppx) {
}
NB. This min--moz-device-pixel-ratio:is not a typo. It is a well documented bug in certain versions of Firefox and should be written like this in order to support older versions (prior to Firefox 16).
- Source
注意。这min--moz-device-pixel-ratio:不是打字错误。这是某些版本的 Firefox 中的一个有据可查的错误，应该像这样编写以支持旧版本（Firefox 16 之前的版本）。
- 来源
As @LiamNewmarch mentioned in the comments below, you can include the background-sizein your shorthand backgrounddeclaration like so:
正如@LiamNewmarch 在下面的评论中提到的，您可以像这样background-size在速记background声明中包含 ：
.box{
background:url('images/[email protected]') no-repeat top left / 200px 200px;
}
However, I personally would not advise using the shorthand form as it is not supported in iOS <= 6 or Android making it unreliable in most situations.
但是，我个人不建议使用速记形式，因为它在 iOS <= 6 或 Android 中不受支持，因此在大多数情况下都不可靠。
回答by Volker E.
Here's a solution that also includes High(er)DPI (MDPI) devices > ~160 dots per inchlikequite a few non-iOS Devices (f.e.: Google Nexus 7 2012):
这是一个解决方案，其中还包括 High(er)DPI ( MDPI) 设备> ~160 点/英寸，就像很多非 iOS 设备（fe：Google Nexus 7 2012）：
.box {
background: url( 'img/box-bg.png' ) no-repeat top left;
width: 200px;
height: 200px;
}
@media only screen and ( -webkit-min-device-pixel-ratio: 1.3 ),
only screen and ( min--moz-device-pixel-ratio: 1.3 ),
only screen and ( -o-min-device-pixel-ratio: 2.6/2 ), /* returns 1.3, see Dev.Opera */
only screen and ( min-device-pixel-ratio: 1.3 ),
only screen and ( min-resolution: 124.8dpi ),
only screen and ( min-resolution: 1.3dppx ) {
.box {
background: url( 'img/[email protected]' ) no-repeat top left / 200px 200px;
}
}
As @3rror404 included in his edit after receiving feedback from the comments, there's a world beyond Webkit/iPhone. One thing that bugs me with most solutions around so far like the one referenced as source above at CSS-Tricks, is that this isn't taken fully into account.
The original sourcewent already further.
由于@3rror404 在收到评论反馈后包含在他的编辑中，因此 Webkit/iPhone 之外还有一个世界。到目前为止，大多数解决方案都让我感到困扰，就像上面在CSS-Tricks 中引用的源一样，这是没有完全考虑到这一点。
在原始的源就已经更进一步。
As an example the Nexus 7 (2012) screen is a TVDPI screen with a weird device-pixel-ratioof 1.325. When loading the images with normal resolution they are upscaled via interpolation and therefore blurry. For me applying this rule in the media query to include those devices succeeded in best customer feedback.
例如，Nexus 7 (2012) 屏幕是一个TVDPI 屏幕，带有奇怪device-pixel-ratio的1.325. 当以正常分辨率加载图像时，它们通过插值被放大，因此变得模糊。对我而言，在媒体查询中应用此规则以包含那些成功获得最佳客户反馈的设备。
回答by Syed
If you are planing to use the same image for retina and non-retina screen then here is the solution. Say that you have a image of 200x200and have two icons in top row and two icon in bottom row. So, it's four quadrants.
如果您打算对视网膜和非视网膜屏幕使用相同的图像，那么这里是解决方案。假设您有一个图像，200x200顶行有两个图标，底行有两个图标。所以，它是四个象限。
.sprite-of-icons {
background: url("../images/icons-in-four-quad-of-200by200.png") no-repeat;
background-size: 100px 100px /* Scale it down to 50% rather using 200x200 */
}
.sp-logo-1 { background-position: 0 0; }
/* Reduce positioning of the icons down to 50% rather using -50px */
.sp-logo-2 { background-position: -25px 0 }
.sp-logo-3 { background-position: 0 -25px }
.sp-logo-3 { background-position: -25px -25px }
Scaling and positioning of the sprite icons to 50% than actual value, you can get the expected result.
将精灵图标缩放和定位到实际值的 50%，即可得到预期的效果。
Another handy SCSS mixin solution by Ryan Benhase.
Ryan Benhase 的另一个方便的 SCSS mixin 解决方案。
/****************************
HIGH PPI DISPLAY BACKGROUNDS
*****************************/
@mixin background-2x($path, $ext: "png", $w: auto, $h: auto, $pos: left top, $repeat: no-repeat) {
$at1x_path: "#{$path}.#{$ext}";
$at2x_path: "#{$path}@2x.#{$ext}";
background-image: url("#{$at1x_path}");
background-size: $w $h;
background-position: $pos;
background-repeat: $repeat;
@media all and (-webkit-min-device-pixel-ratio : 1.5),
all and (-o-min-device-pixel-ratio: 3/2),
all and (min--moz-device-pixel-ratio: 1.5),
all and (min-device-pixel-ratio: 1.5) {
background-image: url("#{$at2x_path}");
}
}
div.background {
@include background-2x( 'path/to/image', 'jpg', 100px, 100px, center center, repeat-x );
}
For more info about above mixin READ HERE.
有关上述 mixin 的更多信息，请阅读此处。
