元素的背景图像不会呈现

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

元素的背景图像不会呈现

回答

相关问题