css div 的背景不工作

Question

我正在尝试使用图像作为 div 元素的背景。
我也更改了 background-position 和 background-size 属性。但它仍然无法正常工作。下面是代码：

.large-circle {
    border-radius: 50%;
    display: inline-block;
    width: 150px;
    height: 150px;
    position:absolute;
   top:50%;
   left:50%;
   margin-left:-5em;
   margin-top:-5em;
}

#center {
 background: url("img/newHex.png") no-repeat;
 background-size: cover;
}

<div class="hex-menu">
 <div class="large-circle" id="center">
  <div class="small-circle" id="one"></div>
  <div class="small-circle" id="two"></div>
  <div class="small-circle" id="three"></div>
  <div class="small-circle" id="four"></div>
  <div class="small-circle" id="five"></div>
  <div class="small-circle" id="six"></div>
 </div>
</div>

任何人都可以找到错误。我已经检查了其他相关问题。他们在这种情况下也不起作用（我已经测试过）。

Answer 1

图像相对于 css 文件位于何处？

我尝试了您的代码段并将图像的路径更改为绝对路径 URL 并且成功了。

尝试将图像 URL 更改为绝对图像，或确保它使用相对于 css 文件的正确路径。

如果你的结构是这样的：

img/
    newHex.png
css/
    style.css

那么你的正确路径是

url('../img/newHex.png')

css div 的背景不工作

css background for div not working

html

css

background-image