元素的背景圖像不會呈現

http://www.norrislakevillas.com/images/block-quote-sample.png

引號坐在一個50×45像素透明的右下角PNG圖像的頂部和左側有10px的間距。

元素正在渲染，但背景圖像除外，它不會顯示出來。

CSS代碼：

#block_quote{ 
    float:left; 
    width:400px; 
    background:#f7f7f7; 
    background-image:url(images/quote-top.png) left top no-repeat; 
    margin:50px 0 100px 53px; 
    border:1px solid #ccc; 
} 

#block_quote p{ 
    font:italic 14px segoe ui, arial, sans-serif; 
    color:#5f5f5f; 
    line-height:1.4em; 
    margin:0; 
    padding:20px 15px 20px 60px; 
}

任何想法，爲什麼圖像不渲染？

謝謝

來源

2012-02-14 lsargent

只是一個猜測：你的CSS文件是在一個名爲CSS的文件夾，所以你必須把../images/quote-top.png爲了通過你的CSS文件訪問圖像文件。 – Giannis 2012-02-14 08:00:57

您的圖像路徑需要相對於CSS文件。如果你在一行中使用所有的聲明，並且最後的順序是no-repeat top left，它也只是背景，而不是背景圖像。

background：url（images/quote-top.png）no-repeat top left;

來源

2012-02-14 07:51:59 SpaceBeers

background是一個「速記屬性」，用於設置所有背景屬性，包括圖像的url。你寫它的方式，它不指定圖像，只指定一種顏色。

所以不要混淆background和個別背景屬性如background-image。它應該是要麼

background:#f7f7f7 url(images/quote-top.png) no-repeat left top;

或

background-color:#f7f7f7; 
background-image:url(images/quote-top.png); 
background-repeat:no-repeat; 
background-position:left top;

但不是這些任意組合;這會混淆瀏覽器。

來源

2012-02-14 07:59:06

元素的背景圖像不會呈現

回答

相關問題