Question

如果您希望背景适合元素的整个区域，如果元素具有任意宽度，则如何添加视网膜背景，具体取决于用户的屏幕大小。

#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");
    }
}

该代码段使用bootstraps标准断点以及每个可能大小的自定义图像。您可能没有使用引导程序，但它显示为概念证明。该片段部分取自https://scotch.io/quick-tips/default-sizes-for-twitter-bootstraps-media-queries

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

1 个答案: