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

Posted 2023-03-06

【中文标题】使用媒体查询隐藏背景图像

【英文标题】：Hide background image using Media Queries

【发布时间】：2014-08-14 04:43:07

【问题描述】：

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

这是我的代码。

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;

是否可以？我知道我可以隐藏 Div、段落等元素，但我还没有看到任何关于的信息。

【问题讨论】：

它可能设置的背景图像：无 例如：@media screen #build background-image: none;

【参考方案1】：

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

根据需要尝试使用值：

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

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

还可以看看Tim Kadlec 的这个blog post，它介绍了有条件地显示背景图像的各种场景。

【参考方案2】：

对 Tamil Selvan 的回答进行扩展，使用语法 @media <criteria> 可以使您的 css 仅适用于您想要的。

JSFiddle DEMO。

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

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 媒体查询的更多信息。

请注意，没有具体的方法来检测浏览器是否是手机。但是，您可以检查屏幕尺寸、像素密度比或浏览器类型。

【参考方案3】：

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

它分配 bgcolor 而不是 bgImage