css - 元素背景图像不会呈现

Question

我正在尝试创建如下图所示的 block 引用:

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

引号位于 50 X 45 像素透明 PNG 图像的右下角，顶部和左侧间距为 10 像素。

除了背景图像外，该元素正确呈现，只是不会显示。

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;
}

图像未呈现的任何想法？

谢谢

Answer 1

您的图像路径需要相对于 CSS 文件。如果您在一行中使用所有声明并且最后的顺序是 no-repeat top left，那么它也只是背景，而不是背景图像。

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