css - 高分辨率/视网膜全尺寸背景

Question

如果您希望背景适合元素的整个区域，如果元素具有任意宽度，具体取决于用户屏幕尺寸，您如何添加 Retina 背景。

#home_data_communication {background:url(../images/home/data-com-bg.jpg) no-repeat; background-size:cover; border-bottom:1px solid #cccccc;}

我能做到

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

#home_data_communication {background-image:url../images/home/data-com-bg@2x.jpg);}

但我不知道背景尺寸是多少。这里有一些 CSS 技巧吗？如何获得具有视网膜质量背景图像的全尺寸背景？

Answer 1

您似乎已经在使用 background-size: cover;和媒体查询，所以我不太确定问题出在哪里。背景尺寸:封面；使用一些 css 魔术来改变图像的大小，以便它始终适合屏幕，无论屏幕有多大。这可能会导致图像在屏幕变大时不成比例，或者导致图像在小屏幕上变得太小。您可以考虑使用 css 断点，您将切换到可能更适合特定尺寸的不同版本的图像。

body {
    background-size: cover;
}

/* Extra Small Devices, Phones */ 
@media only screen and (min-width : 480px) {
    body {
        background-image: url("/img/image-xs.png");
    }
}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
    body {
        background-image: url("/img/image-sm.png");
    }
}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {
    body {
        background-image: url("/img/image-md.png");
    }
}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {
    body {
        background-image: url("/img/image-lg.png");
    }
}

该代码段使用 Bootstrap 标准断点以及每个潜在尺寸的自定义图像。您可能没有使用 bootstrap，但它显示为概念证明。该片段部分摘自 https://scotch.io/quick-tips/default-sizes-for-twitter-bootstraps-media-queries