html - 背景图片不会在 responsive.css 中加载-6ren

html - 背景图片不会在 responsive.css 中加载

转载作者：太空宇宙更新时间：2023-11-04 08:58:06

24

4

所以我有一个图像问题，它不会加载到我的 responsive.css 代码中。我正在尝试根据网站的各种分辨率更改背景图片。下面我将我的部分代码发布在 html 和 responsive.css 中。我已经检查了图像的路径，图像在包含 html、css、responsive 的文件中。有什么技巧可以让它发挥作用吗？我是 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>

最佳答案

您的 HTML 需要修改:

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

删除 img 标签并将 id 背景应用到 figure 标签。

img 标签不是背景图片，所以所有图片都会出现在背景之上。要创建条件，两个图像都需要在 css 中添加为背景图像

您还需要将其添加到您的 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

希望对你有帮助

关于html - 背景图片不会在 responsive.css 中加载，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42973155/

24

4

0

文章推荐： python - 类型错误 : 'int' object does not support item assignment?

文章推荐： python - numpy 将数组作为一个整体进行比较

文章推荐： javascript - .animate 不重复 .toggle 点击事件

php - 在 PHP 中加/除数字
我正在开发一个需要能够平均三个数字的 Facebook 应用程序。但是，它总是返回 0 作为答案。这是我的代码: $y = 100; $n = 250; $m = 300; $number = ($y
javascript - 我需要将一个整数除以 12，如果结果是 float ，则在 javascript 中加 1
我只是无法弄清楚这一点，也找不到任何对我来说有意义的类似问题。我的问题:我从数据库中提取记录，并在我的网页上以每个面板 12 条的倍数显示它们。因此，我需要知道有多少个面板可以使用 JavaScrip

首页

博学

6Ren·AI

商城

html - 背景图片不会在 responsive.css 中加载