元素背景图像不会呈现答案

【问题标题】：element background image won't render元素背景图像不会呈现
【发布时间】：2012-02-15 17:46:22
【问题描述】：

我正在尝试创建如下图所示的块引用：

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

任何想法为什么图像没有呈现？

谢谢

【问题讨论】：

只是猜测：您的 css 文件位于名为 css 的文件夹中，因此您必须放入 ../images/quote-top.png 才能通过您的 CSS 文件访问图像文件。跨度>

标签： css image background element

【解决方案1】：

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

背景：url(images/quote-top.png) 左上角无重复；

【讨论】：

【解决方案2】：

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;

但不能混合使用这些；这会混淆浏览器。

【讨论】：