css - 如何去除手机网站的背景图片?

标签 css twitter-bootstrap mobile background-image

<分区>

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

最佳答案

实际上隐藏背景图片here是简单的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;
    }

}

希望对某人有所帮助。

关于css - 如何去除手机网站的背景图片?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20754428/

相关文章:

javascript - 在 Bootstrap 4 中使最右边的列固定位置

jquery - 高度为 100% 并自动滚动 bootstrap 3

html - 在 Bootstrap 中,如何控制徽章的高度?

css - 如何防止移动设备上的文本输入大小发生变化?

javascript - 缩放图像和视频以适应 iPad 屏幕

html - 启动页面时,将调整图像大小

javascript - css关键帧动画反转

html - 如何使用 html/css 使表格只有一行高?

android - Ios dynamics crm 移动应用 ssl 证书

css - Firefox 不显示 CSS3 动画