Question

我正遇到一个问题。我正试图根据屏幕分辨率加载不同的图像, 但我尝试了下面的代码, 它并没有加载背景。我有一个 Cs 和 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” (即现在的正文) 上的所有分类, 并将背景图像 cs 规则直接应用到“ body” 元素选择器, 例如 :

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

我希望这有帮助,

Lukx 卢克

友情链接