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

ほとんどの場合、cssファイルは別のフォルダーにあるため、イメージファイルへの別のパスが必要です。

一般的な方法は、cssを別のcss/*フォルダーに配置することです。したがって、パスは次のようになります。

url('../img/top_logo_blank_small.png')
于 2013-01-31T13:59:07.547 に答える
2

たとえば、パスを変更してみてください。

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

あなたはサブフォルダーにいるので、私が思うにレベルを上げる必要があります

于 2013-01-31T13:59:59.587 に答える
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 に答える
1

cssはページと同じフォルダにありますか？別のフォルダがある場合は、それに応じてURLを変更する必要があります。

たぶんURLをに変更します

'../img/top_logo_blank_small.png'
于 2013-01-31T14:00:09.160 に答える