CSS 媒体查询和背景图片
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9506069/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Media queries and background images
提问by redconservatory
I have a div
我有一个div
<div id="page">
</div>
With the following css:
使用以下 css：
#page {
background: url('images/white-zigzag.png') repeat-x;
}
@media (max-width: 600px) {
#page {
background: url('images/white-zigzag-mobile.png') repeat-x;
}
}
I notice when I resize my browser, I see the "mobile" background (good) but if I go back and make my browser large, my previous "large" background does not always reappear.
我注意到当我调整浏览器的大小时，我看到了“移动”背景（很好），但是如果我返回并将浏览器变大，我以前的“大”背景并不总是重新出现。
It's an intermittent problem but it's happening often enough that I think I should address it.
这是一个间歇性问题，但它经常发生，我认为我应该解决它。
Is there any way to get around this "background image not appearing" problem or a way to resize background images, so that the media query "shrinks" the background image to fit the new size? As far as I know there is no (widespread) way to change the size of a background image...
有什么办法可以解决这个“背景图像不出现”的问题或调整背景图像大小的方法，以便媒体查询“缩小”背景图像以适应新尺寸？据我所知，没有（广泛的）改变背景图像大小的方法......
回答by Danield
According to this test:
根据这个测试：
If you want onlythe desktop version of the image to be downloaded on the desktop...
如果你想只图像的桌面版本，在桌面上下载...
and onlythe mobile image to be downloaded on the mobile device -
并且只有要在移动设备上下载的移动图像 -
You need to use a min-widthdeclaration to specify a minimum browser width for the desktop image...
您需要使用min-width声明来指定桌面图像的最小浏览器宽度...
anda max-widthfor the mobile image.
和一个max-width用于移动图像。
So your code would be:
所以你的代码是：
@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;
}
}
回答by ckaufman
The code you provided is a little buggy which is probably a good place to start currently you have
您提供的代码有一些问题，这可能是您目前拥有的开始的好地方
#page {
background: url('images/white-zigzag.png') repeat-x;
}
@media (max-width: 600px) {
background: url('images/white-zigzag-mobile.png') repeat-x;
}
The media query portion isn't complete. You still need to provide the CSS selector that you used outside of the query:
媒体查询部分不完整。您仍然需要提供您在查询之外使用的 CSS 选择器：
#page {
background: url('images/white-zigzag.png') repeat-x;
}
@media (max-width: 600px) {
#page {
background: url('images/white-zigzag-mobile.png') repeat-x;
}
}
Start with that and let me know if that fixes things.
从那开始，让我知道这是否能解决问题。
回答by Tushar Dhingra
please use
请用
@media screen and (min-width: 320px) and (max-width:580px) {
#page {
background: url('images/white-zigzag.png') repeat-x
}
}
