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

Question

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

Tom*_*y K 7 css css3 twitter-bootstrap twitter-bootstrap-3

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

Idk如果有任何方法我可以使用Bootstrap的.hidden-xs/.visible-xs来实现这一点,那就是我大声思考,但如果有人使用这个解决方案,我会非常乐意听到它.这也有帮助,因为我使用Bootstrap的导航栏变为触摸屏导航栏xs,意思是<768px,所以我只想在导航栏改变时更改背景图像.

那么任何想法？我现在是一个新手,这是我的第一个真正的项目,不仅仅是孤立的片段.这可能是Java的东西,但idk.我会爱任何帮助.

也是一个快速的半相关问题,我该如何处理background-position: center (-50px from the top).我应该只拍摄我想要使用的图片,并在上面添加50px的空白用油漆或其他任何内容然后上传它？或者是设置这个是CSS的方法吗？

Answer 1

Anu*_*sak 27

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

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

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

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

Run Code Online (Sandbox Code Playgroud)

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

如果图像显然来自服务器端，这将无济于事。提供一个解决方案也很好;) 例如，来自服务器端的图像可能会出现，并且在 body 元素上动态生成样式标签。 (2认同)

Answer 2

blu*_*fus 10

媒体查询 - Bootstrap网格

你可以在你自己的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");
  }
}

Run Code Online (Sandbox Code Playgroud)

<body>
  html body
</body>

Run Code Online (Sandbox Code Playgroud)

归档时间：	10 年，8 月前
查看次数：	47030 次
最近记录：	8 年，2 月前