媒体查询和背景图片

Question

媒体查询和背景图片

17

我有一个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;
  }
}

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

这是一个间歇性的问题，但它发生得足够频繁，我认为我应该解决它。

是否有任何方法可以解决“背景图像未显示”的问题或者一种调整背景图像大小的方法，以便媒体查询“缩小”背景图像以适应新的大小？据我所知，没有（广泛的）方法可以更改背景图片的大小...

- redconservatory

1

你尝试使用@media (min-width:600px) { background: url('images/white-zigzag.png') repeat-x; }了吗？我不确定它是否有效，所以这是一条注释。 - Tim

1

你可能已经知道这个链接：http://css-tricks.com/how-to-resizeable-background-image/（关于如何改变背景图片的大小）。 - juanrpozo

当我这样做时，它不会重新调整图像大小...也就是说，我只能看到图像的一部分，而不是缩小后的图像。 - redconservatory

@juanrpozo 有趣，但那不是CSS的背景：url...那是一个被样式化的图像标签..可以试一下。 - redconservatory

1

看一下 background-size 属性。它是 CSS3 的，但相当受支持。其中一个可能的值是 cover。它在我提供的文章的第一个链接中有解释。顺便问一下，你用的是什么浏览器？ - juanrpozo

显示剩余2条评论

4个回答

1

您提供的代码有一些小问题，这可能是一个不错的起点。目前您的代码中有：

#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;
  }
}

从那里开始，然后让我知道是否解决了问题。

- ckaufman

抱歉，那是我的笔误...我已经更正了上面的问题。 - redconservatory

0

请使用

标签。

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

- Tushar Dhingra

2

请解释为什么您的回答会改善这个问题。抱歉，这是一个要求解释的问题，而不是需要翻译的内容。请提供需要翻译的英文文本。 - nomistic

0

 <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;
    }
    }

- R.G Creation

2

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

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Danield · Accepted Answer

根据这个测试：

如果您只想在桌面设备上下载桌面版本的图像...

并且只想在移动设备上下载移动图像 -

则需要使用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;
  }
}