如何根据屏幕大小更改背景图像，可能使用 Bootstrap [英] How to change background image based on screen size, possibly with Bootstrap

问题描述

我在 CSS 中的 body 上有一个 background-image:url.问题是当我转换到屏幕变成纵向的移动设备时.我有一个不同的面向肖像的背景，我想使用.主要是，在我的情况下，面向肖像"实际上只是转化为移动设备，而不是 iPad/平板电脑.手机在长度和宽度之间的差异更加极端，所以我想在这种情况下链接不同的网址.

Idk 如果有任何方法可以使用 Bootstrap 的 .hidden-xs/.visible-xs 来完成此操作，那只是我想出来的，但是如果有人有使用它的解决方案，我会很高兴听到它.这也会有所帮助，因为我使用的是 Bootstrap 的导航栏，它在 xs 时会变成触摸屏导航栏，意思是 <768px，所以我只想在导航栏发生变化时更改背景图像.

所以有什么想法吗?在这一点上，我是一个完全的新手，这是我的第一个真正的项目，不仅仅是孤立的片段.这可能适用于 Java，但适用于 idk.我愿意提供任何帮助.

也是一个快速的半相关问题，我如何处理 background-position: center (-50px from the top).我是否应该只拍摄我想使用的图片并在顶部添加 50 像素的空白，然后再上传?或者是一种设置方式是CSS?

解决方案

使用 @media 查询来编写窗口大小特定的 css.示例:

@media(最小宽度:400px){.元素 {背景:#cccccc；}}@media(最小宽度:500px){.元素 {背景:#888888；}}@media(最小宽度:600px){.元素 {背景:#222222；}}

这是一个小提琴:http://jsfiddle.net/zhqn1vhh/

I have an background-image:url on my body in 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.

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.

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.

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?

解决方案

Use @media queries to write window size specific css. Example:

@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/

这篇关于如何根据屏幕大小更改背景图像，可能使用 Bootstrap的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！