Question

所以我对图像有这个问题，不会在我的responsive.css代码中加载。我正在尝试根据网站的各种分辨率更改背景图像。下面我在html和responsive.css中发布我的代码部分。我已经检查了图像的路径，图像位于包含html，css，response的文件中。任何提示如何使其工作？对于html和css，我是初学者。

HTML：

#background {
  width: 100vw;
  background-position: center;
  background-size: cover;
}

responsive.css: figure {
  width: 100%;
}

@media (max-width: 992px) {
  #background {
    height: 50vh;
  }
}

@media (min-width: 993px) and (max-width: 1170px) {
  #background {
    height: 70%;
    width: 100%;
    background-image: url('../zadanie-domowe-rwd-materialy/obrazy/man-2.jpg');
  }
}

<figure>
  <img src="zadanie-domowe-rwd-materialy/obrazy/man-1.jpg" alt="Zdjęcie nr 1" id="background">
</figure>

Answer 1

您的HTML需要修改：

<body>
    <figure id="background"></figure>
</body>

删除img标签并将背景ID应用于图形标记。

Img标签不是背景图像，因此所有图像都会出现在背景之上。要创建条件，需要在css中添加两个图像作为background-image

您还需要将此添加到您的CSS中：

#background {
    position: relative;
    height: 500px; // Or a different height
    width: 100%; // Change to 100% of element or window
    background-position: center;
    background-size: cover;
    // Add the follow
    background-image: url('../zadanie-domowe-rwd-materialy/obrazy/man-1.jpg');
 }

更新：整个代码

HTML

  <body>
        <figure id="background"></figure>
  </body>

CSS

#background {
  position: relative;
  height: 500px; // Or a different height
  width: 100%; // Change to 100% of element or window
  background-position: center center;
  background-size: cover;
  background-image: url('http://placehold.it/350x150');
}

@media (min-width: 992px) and (max-width: 1170px) {
    #background {
        background-image: url('https://unsplash.it/200/300');
    }
}

请参阅JsFiddle

我希望这会有所帮助

Answer 2

仅响应更改.css文件而不是HTML。如果你想在移动设备或其他设备中使用css更改img就像这样 Try it我觉得它很有帮助。 https://jsfiddle.net/dup1d62k/4/

无法在responsive.css

2 个答案: