如何删除手机网站的背景图片？

Question

我的桌面网站上有背景图片.但是,由于它的大小,它使移动网站变得缓慢且不成比例.是否可以删除移动网站的背景图片或至少使其响应？

Answer 1

其实这里隐藏背景图片 就是简单的css:

background-image: none;

这是移动解决方案,我使用媒体查询

HTML

<div class="bgimg" >

</div>

外部CSS

/* Show in Large desktops and laptops */
@media (min-width: 1200px) {

.bgimg {
        background-image: url('../img/your-eternity.jpg');
        background-repeat: no-repeat;
        height: 800px;
        width: 1000px;
        background-size:100% auto;
    }

}

/*Hide in Other Small Devices */


/* Landscape tablets and medium desktops */
@media (min-width: 992px) and (max-width: 1199px) {

      .bgimg {
        background-image: none;
    }

}

/* Portrait tablets and small desktops */
@media (min-width: 768px) and (max-width: 991px) {

          .bgimg {
        background-image: none;
    }

}

/* Landscape phones and portrait tablets */
@media (max-width: 767px) {

          .bgimg {
        background-image: none;
    }

}

/* Portrait phones and smaller */
@media (max-width: 480px) {

          .bgimg {
        background-image: none;
    }

}

希望帮助某人.

Answer 2

下面的代码改编自Tim Kadlec的一篇精彩博客文章，该文章介绍了有条件地显示背景图像的各种场景。

对于您的方案，移动版本设置为匹配其父元素的宽度。根据您的布局，您可能需要设置/限制其中元素的大小#container。

如果您选择在移动设备上隐藏背景图像，则第一个样式块将进入第一个媒体查询内部，而第二个样式块可能会被删除。正如 popnoodles 提到的，发布一些代码可以更轻松地提供更具体的解决方案。

<div id="container"></div>

#container {
  background-image: url('images/bg.png');
}

@media all and (min-width: 601px) {
    #container {
        width:200px;
        height:75px;
    }
}
@media all and (max-width: 600px) {
    #container {
        max-width: 100%;
        background-size: 100%;
    }
}