html - 背景图片没有出现在div中？

问题描述

我有以下 div：

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

在 CSS 中，我尝试像这样设置它的背景：

.soundscapeImgDiv {
  /* background-color: white; */
  background-image:url('images/testImg.png') no-repeat;
  background-size: 100%;

  width: 280px;
  height: 85%;
  margin-left: 10px;
  margin-top: 12px;
  border-radius: 12px;
}

但是当我没有图像出现时。如果我只留下颜色，那么框就会出现。

如何解决此问题并使图像显示为背景？

更新：

我目前正在

GET file:///images/testImg.png net::ERR_FILE_NOT_FOUND

在终端。为了background-image:url('/images/testImg.png');

标签： htmlcss

使用background-repeat物业

探索.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>

探索.css：

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%;
}

文件夹结构：

三重检查您的文件夹结构：

file: ///Users /用户名/Desktop/Portals.com/css/images/testImg.png

我相信您的目标是拥有这样的东西： file:///Users/username/Desktop/Portals.com/images/testImg.png

请参阅此工作示例

html - 背景图片没有出现在div中？

问题描述

解决方案

推荐阅读