視網膜顯示屏，高分辨率背景圖像

如果我使用這個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

視網膜顯示屏，高分辨率背景圖像

回答

相關問題