Question

我遇到了问题。我试图根据屏幕分辨率加载不同的图像，但我尝试下面列出的代码，它不加载背景。当说和背景没有显示时，我有一个css和jquery设置。我不知道我哪里出错了？

@media (min-width:800px) { .w800 { background-image: url(images/DCBG800.png);                      @media (min-width:1024px) { .w1024 { background-image: url(images/DCBG1024.png);
@media (min-width:1152px) { .w1152 { background-image: url(images/DCBG1152.png);
@media (min-width:1280px) { .w1280 { background-image: url(images/DCBG1280.png);
@media (min-width:1360px) { .w1360 { background-image: url(images/DCBG1360.png);
@media (min-width:1366px) { .w1366 { background-image: url(images/DCBG1366.png);
@media (min-width:1600px) { .w1600 { background-image: url(images/DCBG1600.png);
}

   <script type="text/javascript">
   function setImageClass() {
switch(true) {
    case($(window).width()>1600): $("body").removeClass("w800 w1024 w1152 w1280 w1360 w1366").addClass("w1600");
    break;
    case($(window).width()>1366): $("body").removeClass("w800 w1024 w1152 w1280 w1360 w1600").addClass("w1366");
    break;
    case($(window).width()>1360): $("body").removeClass("w800 w1024 w1152 w1280 w1366 w1600").addClass("w1360");
    break;
    case($(window).width()>1280): $("body").removeClass("w800 w1024 w1152 w1360 w1366 w1600").addClass("w1280");
    break;
    case($(window).width()>1152): $("body").removeClass("w800 w1024 w1280 w1360 w1366 w1600").addClass("w1152");
    break;
    case($(window).width()>1024): $("body").removeClass("w800 w1152 w1280 w1360 w1366 w1600").addClass("w600");
    break;
    default: $("body").removeClass("w1024 w1152 w1280 w1360 w1366 w1600").addClass("w800");
    break;
}
   }

    $(document).ready(function() {
setImageClass();
    });

    $(window).resize(function() {
setImageClass();
    });

Answer 1

您没有关闭CSS示例中的任何花括号。此外，尝试摆脱“body”上的所有类（也就是现在的javascript），并将background-image css规则直接应用于“body”元素选择器，如下所示：

@media (min-width:800px) { 
   body {
       background-image: url(images/DCBG800.png); 
   }
}

我希望这有帮助，

Lukx

试图根据屏幕分辨率显示不同的背景图像？

1 个答案: