CSS 如何根据屏幕大小更改背景图像，可能使用 Bootstrap
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28704432/
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 change background image based on screen size, possibly with Bootstrap
提问by Tommy K
I have an background-image:urlon my bodyin CSS. The problem is when I transition into mobile devices where the screen becomes portrait orientated. I have a different portrait orientated background I wish to use. Mainly, "portrait-orientated" in my case really just translates to mobile devices, not so much ipads/tablets. Mobiles are much more extreme with the difference between length and width so I want to link a different url in this case.
background-image:url我body在 CSS上有一个。问题是当我过渡到屏幕变成纵向的移动设备时。我有一个不同的面向肖像的背景，我想使用。主要是，在我的情况下，“面向肖像”实际上只是转化为移动设备，而不是 iPad/平板电脑。手机在长度和宽度之间的差异更加极端，所以我想在这种情况下链接不同的网址。
Idk if there's any way I could use Bootstrap's .hidden-xs/.visible-xs to accomplish this, that's just me thinking out loud, but if someone has a solution using this I'd be more than happy to hear it. This also would help since I'm using Bootstrap's navbar which changes into a touchscreen navbar when xs, meaning <768px, So I'd like to only change the background image when the navbar changes.
我想知道是否有任何方法可以使用 Bootstrap 的 .hidden-xs/.visible-xs 来实现这一点，这只是我想出来的，但如果有人有使用它的解决方案，我会很高兴听到它。这也会有所帮助，因为我正在使用 Bootstrap 的导航栏，它在 时变为触摸屏导航栏xs，意思是 <768px，所以我只想在导航栏更改时更改背景图像。
So any ideas? I'm a total newbie at this point, this is my first real project that isn't just isolated snippets. This might be something for Java but idk. I'd love any and all help.
那么有什么想法吗？在这一点上，我是一个完全的新手，这是我的第一个真正的项目，不仅仅是孤立的片段。这可能适用于 Java，但适用于 idk。我愿意提供任何帮助。
Also a quick semi-related question, how do I handle background-position: center (-50px from the top). Should I just take the picture I want to use and add 50px of whitespace on top with paint or whatever then upload that? Or is the a way to set this is CSS?
也是一个快速的半相关问题，我如何处理background-position: center (-50px from the top). 我是否应该只拍摄我想使用的图片并在顶部添加 50 像素的空白，然后再上传？或者是设置它的方法是CSS？
回答by Anupam Basak
Use @mediaqueries to write window size specific css. Example:
使用@media查询编写窗口大小特定的 css。例子：
@media (min-width: 400px) {
.element {
background: #cccccc;
}
}
@media (min-width: 500px) {
.element {
background: #888888;
}
}
@media (min-width: 600px) {
.element {
background: #222222;
}
}
Here's is a Fiddle: http://jsfiddle.net/zhqn1vhh/
这是一个小提琴：http: //jsfiddle.net/zhqn1vhh/
回答by blurfus
Media Queries - Bootstrap Grid
You could have something like this on your own CSS:
你可以在你自己的 CSS 上有这样的东西：
@media (max-width: 300px) {
body {
background-color: red;
background-image: image-url("http://placekitten.com/g/200/300");
}
}
@media (min-width: 301px) and (max-width: 600px) {
body {
background-color: blue;
background-image: image-url("http://placekitten.com/g/400/600");
}
}
@media (min-width: 601px) and (max-width: 768px) {
body {
background-color: yellow;
background-image: image-url("http://placekitten.com/g/500/768");
}
}
@media (min-width: 769px) {
body {
background-color: green;
background-image: image-url("http://placekitten.com/g/800/1048");
}
}<body>
html body
</body>回答by Dylan Little
i do it like this using bootstrap. but Im sure it would work without bootstrap.
我使用引导程序这样做。但我确定它可以在没有引导的情况下工作。
.class {
background-image: image-url("beach.jpg") ;
min-height:100%;
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
-moz-background-size: cover;
}
