Question

尝试使用图像作为div的背景。它只是不会出现。我现在将pic与index.html页面放在同一目录中。

    h1{
 font-family: 'Oldenburg', cursive;
 text-align: center;
}

header{
text-align: center;
}

h2{
font-family: 'Allura', cursive;
text-align: center;
}

 #footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    text-align: center;
}

.menu{
font-family: 'Indie Flower', cursive;
text-align: center;
font-size:  2em;
background-image: url("redone.jpg")
}



 a{
color: black;
}


.main{
height: 500px;
border-style: solid;
background-image: url("images/redone.jpg");
}




<!--  AND    -->

<div class="main">

我认为我的语法正确，我没有别的可以尝试......

感谢您的帮助。

Answer 1

CSS中的网址是相对于.css文件的位置。例如，如果您的目录结构如下所示：

/styles/site.css
/images/redone.jpg
/somepage.html

如果您在CSS中引用images/redone.jpg，则会在redone.jpg处找到/styles/images/redone.jpg。

要正确解析网址，您可以保留相对网址，然后转到目录，然后转到images：

.main{
  height: 500px;
  border-style: solid;
  background-image: url("../images/redone.jpg");
}

或使用绝对网址：

.main{
  height: 500px;
  border-style: solid;
  background-image: url("/images/redone.jpg"); /* note the leading slash */
}

图像作为<div>的背景（更新：将我的CSS文件放在同一目录中作为INDEX.html，效果很好。我不知道....）

1 个答案: