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

如果我使用这个CSS片段的常规显示（其中box-bg.png是200px200px）;

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

和，如果我使用的媒体查询这样定位到视网膜显示器（随着@ 2倍图像是高清晰度的版本）;

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

    .box{background:url('images/[email protected]') no-repeat top left;} 
}

我需要通过400像素的.box DIV 400像素的规模扩大一倍，以适应新的高分辨率的背景图像？

来源

2013-04-22 Dean Elliott

images/[email protected]的尺寸是多少？请说清楚问题。 – TMS 2014-01-24 22:55:06

161

没有，但你确实需要设置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; 
    } 
}

编辑

要添加多一点这个答案，这里是视网膜检测查询我倾向于使用：

@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

注意：这min--moz-device-pixel-ratio:是不是一个错字。这是在某些版本的Firefox中有记录的错误，应该这样写，以便支持旧版本（在Firefox 16之前）。 - Source

正如@LiamNewmarch在下面的评论中提到，您可以在您的速记background-sizebackground声明，如下所示：

.box{ 
    background:url('images/[email protected]') no-repeat top left/200px 200px; 
}

不过，我个人并不建议使用简写形式它在iOS < = 6或Android中不受支持，因此在大多数情况下它不可靠。

来源

2013-04-22 19:04:24 Turnip

你会提供什么建议来设置整页背景的背景大小？我知道x组件的宽度，但y怎么样？ – the0ther 2013-10-09 19:04:28

@thether在这种情况下，您可能想要使用'background-size：cover;'。这将保持宽高比，同时用图像“覆盖”整个背景。 – Turnip 2013-10-10 08:11:48

如果你愿意，你可以像这样将'background-size'属性集成到'background'中：'background：url（'images/[email protected]'）no-repeat top left/200px 200px '。请注意，不支持“background-size”的浏览器将忽略此规则。 – 2013-11-02 21:30:19

这里有一个解决方案，还包括高（ER），DPI（MDPI）装置每英寸>〜160点像相当多的非iOS设备（FE：谷歌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; } }

由于@ 3rror404在收到意见反馈后的编辑中包含在内，这里有一个超越Webkit/iPhone的世界。迄今为止，大多数解决方案都让我感到迷惑，比如CSS-Tricks上面引用的源代码，这是因为没有充分考虑到这一点。
original source已经进一步。

作为一个例子，Nexus 7（2012）屏幕是一个TVDPI屏幕，带有奇怪的device-pixel-ratio of 1.325。当以正常分辨率加载图像时，它们通过插值进行放大，因此模糊。对于我在媒体查询中应用此规则，以包含这些设备在最佳客户反馈中取得成功。

来源

2014-07-08 18:31:48

每个维度的图像2x具有恰好4x像素（例如，理论上可以预期大小为4x），而1.325 * 1.325仅支持1.755625像素增加。我认为图像的质量会以1.325dpi的速度丢失，但如果你使用HiDPI，那么客户端只需要等待更长的页面加载时间，将会有更高的功耗调整图像大小（Nexus 7表格相当以随机重新启动而闻名），并消耗更多带宽。所以，我建议坚持使用'@ 2x'只能服务于'2dppx' +客户端。 – cnst 2016-04-13 20:53:47

如果您打算在视网膜和非视网膜屏幕上使用相同的图像，那么这里是解决方案。假设你有一个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; }

将精灵图标缩放和定位到实际值的50％，可以得到预期的结果。

来源

2016-12-01 06:30:14 Syed

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

回答

相关问题