媒体查询和背景图片答案

【问题标题】：Media queries and background images媒体查询和背景图片
【发布时间】：2012-03-19 08:22:40
【问题描述】：

我有一个 div

<div id="page">

</div>

使用以下css：

   #page {
    background: url('images/white-zigzag.png') repeat-x;
    }

    @media (max-width: 600px) {
  #page {      
  background: url('images/white-zigzag-mobile.png') repeat-x;
  }
}

我注意到，当我调整浏览器的大小时，我看到了“移动”背景（很好），但如果我返回并将浏览器变大，我之前的“大”背景并不总是会重新出现。

这是一个间歇性问题，但它经常发生，我认为我应该解决它。

有没有办法解决这个“背景图片不出现”的问题或调整背景图片的大小，以便媒体查询“缩小”背景图片以适应新的大小？据我所知，没有（广泛的）方法可以更改背景图像的大小...

【问题讨论】：

你试过使用@media (min-width:600px) { background: url('images/white-zigzag.png') repeat-x;我不确定这是否有效，这就是它的评论。
您可能已经知道这个链接：css-tricks.com/how-to-resizeable-background-image（重新更改背景图像的大小）。
当我这样做时，它不会调整图像的大小……也就是说，我只看到图像的一部分，而不是缩小的图像
@juanrpozo 很有趣，但那不是 css 背景：url...这是一个样式化的图像标签..可能会尝试一下。
查看background-size 属性。它是 CSS3，但相当 well supported。它的可能值之一是cover。我链接到的文章的第一个链接对此进行了解释。顺便问一下，你用的是什么浏览器？

标签： css media-queries

【解决方案1】：

根据this test：

如果您希望仅将桌面版本的图像下载到桌面...

并且仅要在移动设备上下载的移动图像 -

您需要使用min-width 声明来指定桌面图像的最小浏览器宽度...

和max-width 用于移动图片。

所以你的代码是：

@media (min-width: 601px) {
  #page {
    background: url('images/white-zigzag.png') repeat-x;
  }
}

@media (max-width: 600px) {
  #page {      
     background: url('images/white-zigzag-mobile.png') repeat-x;
  }
}

【讨论】：

如果它对任何人都有帮助，我遇到的问题是没有适当地包含 <meta> 标签，例如：<meta name="viewport" content="width=device-width, user-scalable=no"> 在 CSS 的其余部分之前。
这里有一个问题：当视口调整大小（到更小尺寸）时，Firefox 和 Chrome 也会下载更小的图像尺寸，例如您从较大的屏幕尺寸（宽度 >= 601px）开始，浏览器会下载较大的图像；然后你将浏览器的大小调整为宽度
@DrunkenMaster 你可能不喜欢这种行为，但这绝不是不合逻辑的。浏览器不知道这两张图片只是同一张图片的不同分辨率，很多人显示不同的图片取决于它是移动设备还是桌面设备。一方面，我更喜欢这种行为。

【解决方案2】：

您提供的代码有点小错误，这可能是您目前拥有的一个很好的起点

#page {
background: url('images/white-zigzag.png') repeat-x;
}

@media (max-width: 600px) {
background: url('images/white-zigzag-mobile.png') repeat-x;
}

媒体查询部分不完整。您仍然需要提供在查询之外使用的 CSS 选择器：

#page {
background: url('images/white-zigzag.png') repeat-x;
}

@media (max-width: 600px) {
  #page {      
  background: url('images/white-zigzag-mobile.png') repeat-x;
  }
}

从那开始，如果这能解决问题，请告诉我。

【讨论】：

抱歉，这是我的错字...我在上面更正了我的问题。

【解决方案3】：

请使用

@media screen and (min-width: 320px) and (max-width:580px) {
  #page {
    background: url('images/white-zigzag.png') repeat-x
  }
}

【讨论】：

请解释为什么您的回答会改善问题

【解决方案4】：

 <div style="width: 100%; height:100%;" class="bg"></div>

.bg{
    background-image:url("coc.jpg");
    background-repeat: no-repeat;
    background-size:cover !important;
    background-position: center;
    overflow: hidden;
}
@media(max-width:900px){
    .bg{
        background-image:url("all.jpg") !important;
        background-repeat: no-repeat;
        background-size:cover !important;
        background-position: center;
        overflow: hidden;
    }
    }

【讨论】：

请添加更多详细信息以扩展您的答案，例如工作代码或文档引用。