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

问题描述 投票:0回答:4

我在 CSS 中的

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

Idk 如果有任何方法我可以使用 Bootstrap 的 .hidden-xs/.visible-xs 来完成这个,那只是我的想法,但如果有人有使用它的解决方案,我会很高兴听到它。这也会有所帮助,因为我正在使用 Bootstrap 的导航栏,它在

xs
时变成触摸屏导航栏,意思是<768px, So I'd like to only change the background image when the navbar changes.

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

还有一个快速的半相关问题,我如何处理

background-position: center (-50px from the top)
。我应该只拍摄我想使用的照片并在顶部添加 50px 的空白并用油漆或其他任何东西然后上传吗?或者设置它的方法是 CSS?

css twitter-bootstrap twitter-bootstrap-3
4个回答
31
投票

使用

@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/


13
投票

媒体查询 - 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>


1
投票

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

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

0
投票

为了实现媒体查询,对于不同的屏幕尺寸,直接在包含源标签的HTML中使用标签是更好更专业的意见。

请在下面找到此方法的实施示例:

 <picture>
  <source srcset="small-image.jpg" media="(max-width: 375px)">
  <source srcset="main-image.jpg">
  <img src="main-image.jpg" alt="" style="width:auto;">
</picture>
© www.soinside.com 2019 - 2024. All rights reserved.