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

【问题标题】：How to change background image based on screen size, possibly with Bootstrap如何根据屏幕大小更改背景图像，可能使用 Bootstrap
【发布时间】：2017-08-24 06:00:22
【问题描述】：

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

如果有什么方法我可以使用 Bootstrap 的 .hidden-xs/.visible-xs 来实现这一点，那只是我在大声思考，但如果有人有使用它的解决方案，我会很高兴听到它.这也会有所帮助，因为我使用的是 Bootstrap 的导航栏，它在 xs 时变为触摸屏导航栏，意思是

所以有什么想法吗？在这一点上，我完全是新手，这是我的第一个真正的项目，而不仅仅是孤立的 sn-ps。这可能是 Java 但 idk 的东西。我很乐意提供任何帮助。

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

【问题讨论】：

你可以使用 CSS 媒体查询，与 bootstrap 一起工作

标签： css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

使用@media 查询来编写特定于窗口大小的 css。示例：

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

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

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

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

【讨论】：

如果图像明显来自服务器端，这将无济于事。也很高兴为此提供一个解决方案；）例如，来自服务器端的图像可能会出现，并且在 body 元素上动态生成样式标签。

【解决方案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>

【讨论】：

【解决方案3】：

我使用引导程序这样做。但我确信它可以在没有引导程序的情况下工作。

.class {
    background-image: image-url("beach.jpg") ;
    min-height:100%;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
    -moz-background-size: cover;
}

【讨论】：

还要确保你的 html 头中有这个 - <meta name="viewport" content="width=device-width, initial-scale=1">