Question

当人们在移动设备上查看网站时，我正在尝试删除我的背景图片。

这是我的代码。

HTML：

<section id="Build">
    <div class="img_contain col-xs-8">
        <img src="assets/images/RockS_BG.png" ">
    </div>
    <div class="column-right col-xs-4 ">        
        <h1>Build</h1>      
        <p>
            BLA BLA BLA         
        </p>
    </div>
</section>

CSS：

#build {
    background-image: url('../images/buildbg.png');
    margin: 0 auto;
    text-align: left;
    padding-top: 40px;
    background-color: #D89330;
}

是否可以使用媒体查询隐藏背景图像？我知道我可以隐藏Divs，段落等元素，但我没有看到任何关于使用媒体查询隐藏背景图像的信息。

Answer 1

您可以使用媒体查询在低分辨率屏幕中禁用bacground。

根据需要尝试使用值：

@media only screen and (max-width: 599px) and (min-width: 600px)
    #Build {
        background-image:none;
    }
}

您必须根据设备调整属性！

另请查看blog post旁边的Tim Kadlec，其中介绍了有条件地显示背景图片的各种方案。

Answer 2

使用语法@media <criteria>扩展Tamil Selvan的答案可以使你的css只适用于你想要的内容。

<强> JSFiddle DEMO

在调整大小时，您会看到图像在600px标记处消失。

<强> CSS：

#build {
    text-align: left;
    padding: 30px;
    background: url('http://i.imgur.com/DFlOcoF.jpg') center no-repeat, #D89330;
}

@media screen and (max-width: 600px) {
    #build {
        background: #D89330;
    }
}

您可以在Mozilla Developer Website和CSS Tricks上阅读有关CSS媒体查询的更多信息。

请注意，没有特定方法可以检测浏览器是否为手机。但是，您可以检查屏幕大小，像素密度比或浏览器类型。

Answer 3

@media screen and (max-width: 600px) {
    #Element_which_to_hide_bgimage{
        background: #D89330;
    }
}

分配bgcolor而不是bgImage

使用媒体查询隐藏背景图像

3 个答案: