html - CSS 问题 : absolute path not working for background image

标签 html css background-image absolute-path

在一个简单的静态网页元素中,我的 main.css 中有以下内容:

.navbar-custom {
  background: rgb(52, 73, 94);
  background: rgba(52, 73, 94, 0.7);  /* navbar-bgcolor */
  background-image: url(../../images/distant-lights.jpg);
  background-size: cover;
  /* background-image: url(https://jessicasse.files.wordpress.com/2012/10/distant-lights-1-1152x8641.jpg); */
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 3;
  font-family: 'Lato', 'Open Sans', 'Helvetica Neue', Helvetica, Calibri, Arial, sans-serif;  /* heading font */
}

这按预期工作。但是,如果我修改 background-image 行并指定绝对路径 /images/distant-lights.jpg,则图像不会显示。

元素结构如下:

enter image description here

即使 HTML+CSS 使用相对路径,我想知道为什么绝对路径失败。如您所见,我尝试了使用 http 的绝对 URL,效果很好。

最佳答案

/images/distant-lights.jpg 

这不是绝对路径。绝对路径从系统根目录开始。在典型的 Linux 系统上,它看起来像这样:

/home/username/somefolder/someotherfolder/projectfolder/images/distant-lights.jpg

关于html - CSS 问题 : absolute path not working for background image,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50661216/

相关文章:

asp.net - 服务器端控制 - 如何使用 css 设置背景? (链接和悬停)

css - 仅跨子项跨越父项的背景图像

css - 无法让背景图像覆盖整个屏幕宽度

CSS:当div扩展时,图像在safari中移动

安卓 WebView : how do I control webView height?

css - Firefox 滚动条颜色变化

css - asp .net 背景图像在回发时闪烁

html - 如何对齐图像并将信息放在图像下方

javascript - html/javascript/css 如何组合并解决这个问题

javascript - div 未填充显示中的空白区域 : table;