使用媒体查询隐藏背景图片 [英] Hide background image using Media Queries

问题描述

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

I'm attempting to remove my background image when people view the site on mobile devices.

这是我的代码.

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，段落等元素，但是我还没有看到有关通过媒体查询隐藏背景图片的任何信息.

Is it possible to hide a background image using media queries? I understand that I could hide elements like the Divs, paragraphs etc etc, but I haven't seen any info on hiding a background image with media queries.

推荐答案

您可以使用媒体查询在低分辨率屏幕上禁用免费.

You can use media query to disable bacground in low resolution screens.

尝试使用所需的值:

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

您将不得不根据设备调整属性！

You will have to adjust the attributes depending on the device!

也请查看此博客文章 Tim Kadlec ，介绍了各种情况下有条件地显示背景图像的情况.

Also take a look at this blog post by Tim Kadlec that walks through the various scenarios for conditionally displaying a background image.

这篇关于使用媒体查询隐藏背景图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！