我在background-image:url
的CSS中有一个body
。问题是当我转换到屏幕变为纵向的移动设备时。我想要使用不同的纵向背景。主要是,"肖像导向"在我的情况下,真的只是转换为移动设备,而不是ipads /平板电脑。由于长度和宽度之间的差异,手机更加极端,因此我想在这种情况下链接不同的网址。
如果我有任何方法可以使用Bootstrap的.hidden-xs / .visible-xs来实现这一目标,那我只能大声思考,但如果有人有解决方案的话使用这个,我很高兴听到它。这也有帮助,因为我使用Bootstrap的导航栏,当xs
改变为触摸屏导航栏时,意味着< 768px,所以我只想改变背景图像时导航栏更改。
那么任何想法?在这一点上,我是一个新手,这是我的第一个真正的项目,不仅仅是孤立的片段。这可能是Java的东西,但idk。我喜欢任何帮助。
这也是一个快速的半相关问题,我该如何处理background-position: center (-50px from the top)
。我应该只拍摄我想要使用的图片,并在上面添加50px的空白用油漆或其他任何内容然后上传它?或者是设置这个是CSS的方法吗?
答案 0 :(得分:24)
使用@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/
答案 1 :(得分:8)
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>
答案 2 :(得分: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;
}