如何根据屏幕尺寸更改背景图片，可能使用 Bootstrap

Question

我在 CSS 的 body 上有一个 background-image:url。问题是当我过渡到屏幕变为纵向的移动设备时。我有一个不同的纵向背景，我想使用。主要是，"portrait-orientated" 在我的例子中实际上只是转化为移动设备，而不是 ipads/tablets。由于长度和宽度之间的差异，手机更加极端，所以在这种情况下我想 link 一个不同的 url。

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

有什么想法吗？在这一点上我完全是个新手，这是我的第一个真正的项目，它不仅仅是孤立的片段。这可能是 Java 的东西，但我不知道。我很乐意提供任何帮助。

还有一个快速的半相关问题，我该如何处理 background-position: center (-50px from the top)。我应该只拍摄我想使用的照片并在顶部添加 50px 的空白并用油漆或其他任何东西然后上传吗？或者设置它的方法是 CSS?

Answer 1

我使用 bootstrap 这样做。但我确定没有 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;
}

Answer 2

Media Queries - Bootstrap Grid

你可以自己拥有这样的东西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>

Answer 3

使用 @media 查询写入 window 尺寸特定 css。示例：

@media (min-width: 400px) {
    .element {
        background: #cccccc;
    }
}

@media (min-width: 500px) {
    .element {
        background: #888888;
    }
}

@media (min-width: 600px) {
    .element {
        background: #222222;
    }
}

这是一个Fiddle：http://jsfiddle.net/zhqn1vhh/

如何根据屏幕尺寸更改背景图片，可能使用 Bootstrap

How to change background image based on screen size, possibly with Bootstrap

css

twitter-bootstrap

twitter-bootstrap-3