無法獲取背景圖像顯示在div中？

作爲主題概述，背景div不會顯示，我認爲你需要定義寬度和高度，但這不起作用，我檢查了名稱和文件路徑，這些都看起來不錯。無法獲取背景圖像顯示在div中？

<head> 
<link rel="stylesheet" type="text/css" href="css/invoicestyle.css"/> 
</head> 
<body> 
<div id="wrapper"> 
<div id="header"> 
    <div id="logo"><img src="images/ATT3006209.jpg" /></div> 
    <div id="card"><img src="images/ATT3006207.jpg" /><br /><img src="images/ATT3006208.jpg" /></div> 
    <div class="clear"></div> 
    <div id="tagline"><p>Tagline goes here</p></div> 
    </div> 

    <div id="bar"> 
     <div id="left"></div> 
     <div id="middle"></div> 
     <div id="right"></div> 
     <div class="clear"></div> 
    </div> 

</div> 
</body>

body{ 
background:#FFF; 
font-family:Arial; 
font-size:12px; 
} 

.clear{ 
clear:both; 
} 
#wrapper{ 
width:1000px; 
margin:auto; 
} 
#logo{ 
float:left; 
} 
#card{ 
float:right; 
} 
#card img{ 
padding-bottom:5px; 
} 

#bar{overflow: hidden;} 
#left{ 
background: url("images/left.jpg") no-repeat; 
width:10px; 
height:50px; 
float:left; 
display: block 
} 
#middle{ 
background: url("images/mid.jpg") repeat-x; 
width:980px; 
height:50px; 
float:left; 
display: block 
} 
#right{ 
background: url("images/right.jpg") no-repeat; 
width:10px; 
height:50px; 
float:right; 
display: block 
}

來源

2012-03-25 jerrythebum

你確定你的意思是'圖像/'和'不../圖像/'？ – elclanrs 2012-03-25 19:59:57

你使用的是外部的css文件嗎？你可以發佈你的文件夾結構嗎？ – 2012-03-25 20:01:37

沒有區別 – jerrythebum 2012-03-25 20:02:03

嘗試添加

#bar{overflow: hidden;}

我不知道，如果你的.clear CSS是正確的，因爲你沒有貼吧，這可能是它是不是這樣的。請讓我知道問題是否仍然存在。

來源

2012-03-25 20:06:16 mkk

.clear { \t明確：兩者; } – jerrythebum 2012-03-25 20:07:49

似乎應該這樣做。我會嘗試溢出：無論如何，儘管我不太確定，如果它會幫助。你有什麼鏈接我可以用螢火蟲調試嗎？作爲調試過程，請嘗試將圖像更改爲背景：粉紅色;背景：藍色;等等，如果它可以工作，那麼圖像就會出現問題。在這種情況下，我會確保圖像的大小不大於div中聲明的寬度和高度。 – mkk 2012-03-25 20:09:29

您不能設置裏面background-image一個background-repeat財產。要麼自己創建background，要麼將repeat的東西移動到它自己的background-repeat屬性上，因爲它應該是。

來源

2012-03-25 20:01:14

首先是舊版本，使用background：url（）現在更改爲jsut。請參閱已編輯的OP – jerrythebum 2012-03-25 20:03:17

嘗試在圖像URL附近添加引號（不是必需的，但可能會令瀏覽器感到困惑） – 2012-03-25 20:05:25

嘗試引用 - 無變化。 – jerrythebum 2012-03-25 20:08:09

#bar 
{ 
    width:100%; 
    height:100%; 
}

現在我在你的項目中使用你的代碼。我添加了這個代碼在我的項目中工作。

來源

2012-03-25 20:06:39

這有幫助嗎？

http://jsfiddle.net/9ygJG/

#bar { 
background: orange; 
width: 100%; 
height: 10em; 
} 

#left{ 
width:10px; 
height:50px; 
float:left; 
background-color: black; 
background-image: url(images/left.jpg) no-repeat; 
} 
#middle{ 
width:980px; 
height:50px; 
float:left; 
background-color: blue; 
background-image: url(images/mid.jpg) repeat-x; 

} 
#right{ 
width:10px; 
height:50px; 
float:right; 
background-color: black; 
background-image: url(images/right.jpg) no-repeat; 
}

來源

2012-03-25 20:07:03

它顯示所有區域爲有色沒有圖像：/ – jerrythebum 2012-03-25 20:14:07

顯然我添加了背景色，因爲您在自己的項目中使用了相關的URL。 – 2012-03-25 23:17:45

無法獲取背景圖像顯示在div中？

回答

相關問題