css - 如何根据屏幕大小更改背景图像，可能使用 Bootstrap

Question

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

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

有什么想法吗？在这一点上我完全是个新手，这是我的第一个真正的元素，它不仅仅是孤立的片段。这可能适用于 Java，但 idk。我很乐意提供任何帮助。

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

Answer 1

使用@media 查询来编写特定于窗口大小的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/