CSS图像未显示在页面上

Question

我的路径可能不正确，但我将图像从其文件夹拖放到 css 背景属性，所以它应该是正确的。看起来不错，但不确定。如果我从注释掉的代码中看到的 https url 加载另一个图像，它工作正常！

如果我有正确的路径，这可能与图像安全或权限有关吗？我将图像从另一个文件夹复制到 App_Data/Images/。 我没有收到任何 javascript 控制台错误或控制台中显示找不到图像的任何内容。

.centerMarker {
  position: absolute;
  /*url of the marker*/
  background: url('../App_Data/Images/meetups.png') no-repeat;
  /*this does not work*/
  /*background: url(https://maps.gstatic.com/mapfiles/markers2/marker.png) no-repeat;*/
  /*this works*/
  /*center the marker*/
  top: 50%;
  left: 50%;
  z-index: 1;
  /*fix offset when needed*/
  margin-left: -10px;
  margin-top: -34px;
  /*size of the image*/
  height: 34px;
  width: 20px;
  cursor: pointer;
}

site.css是css所在的位置，从这张图可以看出图片在App_Data的Images中。

这是我在 IE 开发工具的 DOM 资源管理器中看到的内容。 这是正确的吗？

Answer 1

尝试使用根相对 url 而不是绝对路径。因此，它不会从当前文件开始，爬上树，然后再往下走，而是从顶部开始向下工作。

background: url('/App_Data/Images/meetups.png') no-repeat;

或

background: url('~/App_Data/Images/meetups.png') no-repeat;

对于您的文件结构，您的路径看起来确实正确，但是一旦网站在服务器上呈现，您的结构可能会有点不同（例如，Content 文件夹可能只是您所有视图的存储位置，但被省略来自实际路径）。