视网膜显示屏，高分辨率背景图像

这可能听起来像个愚蠢的问题。

如果我使用这个 CSS 片段定期显示(其中 box-bg.png是200px 的200px) ;

.box{
background:url('images/box-bg.png') no-repeat top left;
width:200px;
height:200px
}

如果我使用像这样的媒体查询来定位视网膜显示器(@2x 图像是高分辨率版本) ;

@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {


.box{background:url('images/box-bg@2x.png') no-repeat top left;}
}

我需要双倍的 .box div 的大小为400px 的400px 匹配新的高分辨率背景图像？

112613 次浏览
小开
最佳答案

Do I need to double the size of the .box div to 400px by 400px to match the new high res background image

No, but you do need to set the background-size property to match the original dimensions:

@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {


.box{
background:url('images/box-bg@2x.png') 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) {


}

- Source

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

As @LiamNewmarch mentioned in the comments below, you can include the background-size in your shorthand background declaration like so:

.box{
background:url('images/box-bg@2x.png') 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.

小开

Here's a solution that also includes High(er)DPI (MDPI) devices > ~160 dots per inch like quite a few non-iOS Devices (f.e.: 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/box-bg@2x.png' ) 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 source went already further.

As an example the Nexus 7 (2012) screen is a TVDPI screen with a weird ABC0 of 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.

小开

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 200x200 and have two icons in top row and two icon in bottom row. So, it's four quadrants.

.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.

Another handy SCSS mixin solution by Ryan Benhase.

/****************************
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.

小开

You could use image-set(). This CSS function currently has limited support, but it does work. More about it on MND web docs, but here is an example how it works:

.box {
background-image: -webkit-image-set(
url('images/box-bg.png') 1x,
url('images/box-bg@2x.png') 2x); /* Temporary fallback for Chrome and Safari browsers until they support 'image-set()' better */
background-image: image-set(
url('images/box-bg.png') 1x,
url('images/box-bg@2x.png') 2x);
}

The '1x' and '2x' are the resolution here. '2x' for retina displays.


提交答案