在一个简单的静态网页元素中,我的 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
,则图像不会显示。
元素结构如下:
即使 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/