Html 背景图像没有显示在div中？_Html_Css

Html 背景图像没有显示在div中？

html css

Html 背景图像没有显示在div中？,html,css,Html,Css,我有以下部门： <div class="soundscapeImgDiv"> </div> 但当我这样做时，没有图像显示出来。如果我只留下颜色，框就会出现如何修复此问题并使图像显示为背景？更新：我目前正在得到file:///images/testImg.png net:：找不到错误文件在候机楼。对于背景图像：url（'/images/testImg.png'）使用背景重复属性 explore.html： <!DOCTYPE html> <h

我有以下部门：

<div class="soundscapeImgDiv"> </div>

但当我这样做时，没有图像显示出来。如果我只留下颜色，框就会出现

如何修复此问题并使图像显示为背景？

更新：

我目前正在

得到file:///images/testImg.png net:：找不到错误文件

在候机楼。对于

背景图像：url（'/images/testImg.png'）
使用背景重复
属性
explore.html：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css/explore.css">
</head>
<body>
<div class="soundscapeImgDiv"></div>
</body>
</html>

文件夹结构：



三次检查文件夹结构：
file:///Users/username/Desktop/Portals.com/css/图像/testImg.png
我相信你的目标是这样：
file:///Users/username/Desktop/Portals.com/images/testImg.png

这是因为您混合了背景图像
属性和背景重复
属性
如果要在一行中声明这两个属性，请使用background
属性：

.soundscapeImgDiv{
/*背景色：白色*/
背景：url（'https://picsum.photos/150/450")不重复;；
背景大小：100%；
宽度：280px；
身高：85%；
左边距：10px；
边缘顶部：12px；
边界半径：12px；
}
我认为no repeat语句弄乱了代码，请尝试删除no repeat或使用：-
.soundscapeImgDiv {
/* background-color: white; */
background-image:url('images/testImg.png');
background-size: 100%;
background-repeat:no-repeat;
width: 280px;
height: 85%;
margin-left: 10px;
margin-top: 12px;
border-radius: 12px;
}

有两个因素使图像无法正常工作：

属性background image
不接受no repeat
作为第二个参数，您可以使用background
shorthand属性传递url（）no repeat

高度剂量的百分比值在未明确声明body
或html
高度的情况下起作用。您可能需要查看此值或将其替换为vh，px
它将起作用
您的HTML、CSS和图像文件都位于不同的位置。因为您的CSS文件位于一个名为CSS的文件夹中。当您使用路径images/testImg.png时，css文件将在css文件夹中查找名为images的文件夹。为了走上正确的道路，您需要使用。。向上移动一个文件夹。因此，当CSS文件运行并查找图像时，../images/testImg.png将向上移出CSS文件夹，然后进入图像文件夹。
请点击F12
，查看是否存在任何控制台错误。最常见的原因是图像没有加载&页面抛出了一个404错误
。如果出现404错误
，请阅读更多内容并确保您的内容正确。能否先检查相关路径？您的图像位于何处？@Cempoalxóchitl CSS文件位于一个名为CSS的文件夹中，而图像文件夹位于CSS文件夹的同一级别。请尝试此。/images/testImg.png
我已经做了：背景图像：url（'images/testImg.png'））不重复；Try:背景图像：url（“./images/testImg.png”）移除无重复
零件。使用background repeat
属性，或者使用background:url（“images/testImg.png”）不重复@EGC GETfile:///Users/username/Desktop/Portals.com/css/images/testImg.png net:：ERR_FILE_NOT_found或提供文件夹结构的图像（图像所在位置&试图引用图像的HTML）
div.soundscapeImgDiv {
  /* background-color: white; */
  background-image: url("../images/testImg.png");

  background-size: 100%;
  background-repeat: no-repeat;
  width: 280px;
  height: 85%;
  margin-left: 10px;
  margin-top: 12px;
  border-radius: 12px;
}

html, body {
  height: 100%;
}

.soundscapeImgDiv {
/* background-color: white; */
background-image:url('images/testImg.png');
background-size: 100%;
background-repeat:no-repeat;
width: 280px;
height: 85%;
margin-left: 10px;
margin-top: 12px;
border-radius: 12px;
}