CSS 如何删除移动网站的背景图片？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20754428/
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
How to remove background image for mobile site?
提问by Ryan Salmons
I have a background image on my desktop site. However, because of the size it makes the mobile site slow and out of proportion. Is it possible to remove the background image for the mobile site or at least make it responsive?
我的桌面网站上有一个背景图片。然而，由于它的大小，它使移动网站缓慢且不成比例。是否可以删除移动网站的背景图片或至少使其具有响应性？
回答by shaijut
Actually to hide background image hereis the simple css:
其实隐藏背景图像这里是一个简单的CSS：
background-image: none;
Here is the solution for mobile, i used media queries
这是移动解决方案，我使用了媒体查询
HTML
HTML
<div class="bgimg" >
</div>
External CSS
外部 CSS
/* Show in Large desktops and laptops */
@media (min-width: 1200px) {
.bgimg {
background-image: url('../img/your-eternity.jpg');
background-repeat: no-repeat;
height: 800px;
width: 1000px;
background-size:100% auto;
}
}
/*Hide in Other Small Devices */
/* Landscape tablets and medium desktops */
@media (min-width: 992px) and (max-width: 1199px) {
.bgimg {
background-image: none;
}
}
/* Portrait tablets and small desktops */
@media (min-width: 768px) and (max-width: 991px) {
.bgimg {
background-image: none;
}
}
/* Landscape phones and portrait tablets */
@media (max-width: 767px) {
.bgimg {
background-image: none;
}
}
/* Portrait phones and smaller */
@media (max-width: 480px) {
.bgimg {
background-image: none;
}
}
Hope helps someone.
希望能帮助某人。
回答by cantera
The code below is adapted from a great blog postby Tim Kadlecthat walks through the various scenarios for conditionally displaying a background image.
下面的代码改编自Tim Kadlec 的一篇很棒的博客文章，该文章介绍了有条件地显示背景图像的各种场景。
For your scenario, the mobile version is set to match the width of its parent element. Depending on your layout, you may need to set/restrict the size of the element that #containeris in.
对于您的方案，移动版本设置为与其父元素的宽度相匹配。根据您的布局，您可能需要设置/限制所在元素的大小#container。
If you elect to hide the background image on mobile, then the first style block would go inside the first media query and the second one could be eliminated. As popnoodles mentioned, posting some code would make it easier to provide a more specific solution.
如果您选择在移动设备上隐藏背景图像，则第一个样式块将进入第一个媒体查询，而第二个将被删除。正如 popnoodles 所提到的，发布一些代码可以更容易地提供更具体的解决方案。
<div id="container"></div>
#container {
background-image: url('images/bg.png');
}
@media all and (min-width: 601px) {
#container {
width:200px;
height:75px;
}
}
@media all and (max-width: 600px) {
#container {
max-width: 100%;
background-size: 100%;
}
}
回答by Gajanan
You can use media query to specify different css rules for desktop version of site and mobile site .
您可以使用媒体查询为桌面版站点和移动站点指定不同的 css 规则。
Refere How to use CSS media query to scale background-image to viewing window
Using media queries depends on resolution of the screen we can set the styling . Refere https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queriesfor more information about media query .
使用媒体查询取决于我们可以设置样式的屏幕分辨率。有关媒体查询的更多信息，请参阅https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries。
You can also refer
http://mobile.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/for creating mobile version of your website .
您还可以参考
http://mobile.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/创建您网站的移动版本。
