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

cedebl8k 于 2023-04-13 发布在 Bootstrap

关注(0)|答案(4)|浏览(244)

我在CSS中的body上有一个background-image:url。问题是当我过渡到屏幕变成肖像导向的移动的设备时。我希望使用不同的肖像导向背景。主要是，“肖像导向”在我的情况下真的只是转换到移动设备，没有那么多iPad/平板电脑。手机在长度和宽度的差异上要极端得多，所以在这种情况下我想链接一个不同的URL。
Idk如果有任何方法可以使用Bootstrap的.hidden-xs/.visible-xs来实现这一点，这只是我的想法，但如果有人有一个解决方案，使用这个我会非常乐意听到它。这也会有所帮助，因为我正在使用Bootstrap的导航栏，当xs，即〈768 px，因此，我想只改变背景图像时，导航栏的变化。
有什么想法吗？我是一个完全的新手，这是我第一个真实的的项目，而不仅仅是孤立的片段。这可能是Java的东西，但idk。我喜欢任何和所有帮助。
同样是一个快速的半相关问题，我如何处理background-position: center (-50px from the top)。我应该只是采取我想使用的图片，并添加50 px的空白在顶部与油漆或什么，然后上传？或者是一种方法来设置这是CSS？

css

来源：https://stackoverflow.com/questions/28704432/how-to-change-background-image-based-on-screen-size-possibly-with-bootstrap

4条答案

按热度按时间

jucafojl1#

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

赞(0）回复(0）举报 2023-04-13

zwghvu4y2#

媒体查询- 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");
  }
}

<body>
  html body
</body>

赞(0）回复(0）举报 2023-04-13

bjg7j2ky3#

我这样做是使用 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;
}

赞(0）回复(0）举报 2023-04-13

lvmkulzt4#

代替实现媒体查询，我的专业意见是将标签直接合并到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>

赞(0）回复(0）举报 2023-04-13

我来回答

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

4条答案

相关问题

热门标签

最新问答