2

我试图让我的背景图像显示在页面的顶部中心。如果我这样做，图像效果很好：

<style>
  body {
   background: #FFF url('img/top_logo_blank_small.png') no-repeat fixed;
  }
</style>

我似乎无法弄清楚我哪里出错了。一定有什么东西是我搞砸了，我就是看不到。这是CSS：

body {
font-family: 'Quattrocento Sans', helvetica, sans-serif;
background: #EEE url('img/top_logo_blank_small.png') no-repeat fixed;
color: #fff;
margin: 0;
padding: 0;
}

a {
color: black;
text-decoration: none;
}

/* Typography */

.header h1 {
position: absolute;
width:100%;
top: 50%;
margin-top: -20px;
text-align: center;
letter-spacing: 4px;
}

.header h1 em {
font-size: 1.200em;
font-style: normal;
}

h1 {
font-size: 2.2em;
color: #fff;
}

.content h2 {
font-size: 1.75em;
color: #fff;
letter-spacing: 4px;
text-align: center;
}

.content h2 em {
font-size: 1.2em;
font-style: normal;
}

.content h3 {
text-align: center;
font-size: 1.0em;
font-weight: normal;
color: #ede0ed;
letter-spacing: 1px;
margin-bottom: 25px;
}

.content h4 {
margin-top: 0;
text-align: center;
font-size: 0.8em;
font-weight: normal;
color: #ede0ed;
letter-spacing: 1px;
}

#banner p {
text-align: center;
}

/* Navigation */

#nav {
margin: 4px 4px 40px;
}

#nav ul {
padding: 0;
margin: auto;
list-style: none;
}

#nav ul li {
width: 50%;
color: #BBB;
float: left;
font-family: 'Cabin Sketch';
font-size: 1.75em;
text-align: center;
background: url(img/scribble_dark.png);
}

#nav ul li a {
display: block;
/*padding: 5px 20px;*/
}

#nav ul li a:hover {
background: #e0d0e0;
}

/* Content */

.container{
max-width: 720px;
margin: 50px auto 0;
background: #FFF url('img/top_logo_blank_small.png') no-repeat fixed 0 0;
}

.header {
position: relative;
background-color: #b88fb8;
border-top: 5px solid #ede0ed;
height: 75px;
}

.content {
background-color: #000;
padding: 15px;
margin-bottom: 10px;
}

div#about {
padding:25px;
min-height: 255px;
}

img#portrait {
float: left;
margin-right: 25px;
width: 256px;
height: 256px;
}

div#footer {
width: 100%;
max-width: 720px;
margin: auto;
color: black;
text-align: right;
padding: 0 10px;
font-size: 0.850em;
}

@media screen and (max-width: 650px) {

.container { 
    width: 90%;
    max-width: none;
}

div#footer {
    width: 90%;
}
}
4

4 回答 4

2

尝试更改您的路径，例如：

background: #EEE url('../img/top_logo_blank_small.png') no-repeat fixed top;

因为你在一个子文件夹中，所以你必须提高我认为的级别

于 2013-01-31T13:59:59.587 回答
2

您的 css 文件很可能位于不同的文件夹中，因此需要另一个指向图像文件的路径。

常见的做法是将css放在单独的css/*文件夹中，所以路径应该是：

url('../img/top_logo_blank_small.png')
于 2013-01-31T13:59:07.547 回答
1

css是否与页面位于同一文件夹中？如果您有不同的文件夹，则需要相应地更改 URL。

也许将网址更改为

'../img/top_logo_blank_small.png'
于 2013-01-31T14:00:09.160 回答
1

这个 CSS 似乎工作正常，你确定图像存在吗？

http://jsfiddle.net/ghsNR/

我刚刚在这里尝试过，它适用于来自http://placehold.it/的图像 

body {
font-family: 'Quattrocento Sans', helvetica, sans-serif;
background: #EEE url('http://placehold.it/500x500') no-repeat fixed top;
color: white;
margin: 0px;
padding: 0px;
}

观察到这一点后，最可能的原因是您的 CSS 实际上没有正确定位您的图像。我建议使用 Chrome 开发工具或 Firebug 之类的工具来检查浏览器试图用来加载图像并从那里继续前进的绝对路径。

于 2013-01-31T13:59:43.377 回答