如何使背景图像 (CSS) 具有响应性？答案

【问题标题】：How can I make a background image (CSS) responsive?如何使背景图像 (CSS) 具有响应性？
【发布时间】：2019-10-03 00:33:12
【问题描述】：

首先我想说的是，我已经尝试了我在这个网站和其他网站上能找到的所有东西，但这对我正在做的事情根本不起作用。我用

设置了背景

header.masthead {
  text-align: center;
  color: white;
  background-image: url("../img/image.png");
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position: center center;
  background-size: cover;
}

并且想让它具有响应性（针对移动设备进行了优化），我找到了一个可行的方法，但它破坏了桌面端的体验（我尝试使用@media 标签来指定分辨率，但它什么也没做）。

有什么帮助吗？

编辑：您可以在https://github.com/t0091/t0091.github.io/tree/master/home 查看 GitHub 存储库。

【问题讨论】：

这个link 可能会有所帮助。

标签： html css twitter-bootstrap image url

【解决方案1】：

由于您通过 css 将图像保留为背景，因此无法对其应用任何引导响应类。

您可以做的是让背景图像具有多种分辨率，并将小分辨率图像放在媒体查询中，如下所示：

@media screen and (max-width: 800px) {
header.masthead {
    text-align: center;
    color: white;
    width: 100%;
    position: relative;
    background: url("smallresimage.png") center center no-repeat; /*put small res image here*/
    background-size: cover;
    background-attachment: scroll;
}

【讨论】：

【解决方案2】：

使用

@media only screen and (max-width: 1000px) {

}

把你的手机专用的东西放在那里，或者把它切换到 min-width:1000px 然后把你的非手机放在那里。

【讨论】：