Question

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

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

引号位于50 x 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;
}

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

由于

Answer 1

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

background：url（images / quote-top.png）不重复左上角;

Answer 2

background是一个“速记属性”，用于设置所有背景属性，包括图像的网址。你写它的方式，它不指定图像，只指定颜色。

所以不要混淆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;

但不是这些的任何组合;这会混淆浏览器。

元素背景图像不会渲染

2 个答案: