Question

我有一个blockquote的背景图片，但我希望它从blockquote的底部停止30px左右。

目前的css：

.project-inner-quotes blockquote
{
  background: url("Img/quoteTop.gif") no-repeat scroll center top transparent  ;
  margin: 0 3px 0 3px;
  font-style:italic;
  font-size:14px;
}

原因是我的报价中有一个p标签，其中有关闭语音buuble ...

.project-inner-quotes blockquote > p:last-child 
{
    background: url("Img/quoteBot.gif") no-repeat scroll center bottom transparent;
    padding: 30px 20px 50px 50px;
 }

Answer 1

可以用css“伪造”一个棘手的方式因为它取决于你的设计。我现在要做一些假设，首先你的blockquote容器元素有一个#fff背景（真的可以是任何颜色）。

在这种情况下你可以这样做：

.project-inner-quotes blockquote > p:last-child {
    background: url("Img/white-image_8x30") repeat-x scroll left bottom transparent;
}

.project-inner-quotes blockquote > p:last-child span {
    background: url("Img/quoteBot.gif") no-repeat scroll center bottom transparent;
    padding: 30px 20px 50px 50px;
    display: block;
}

这将“伪造”从底部偏移30px。将p文本包装在将获得背景图像和显示块的范围内，以便应用填充。

您需要创建一个8px宽（用于更好的平铺）和30px高图像，这些图像将应用于底部的段落。当“偏移”quoteTop图像时，图像的颜色将是您尝试获得的背景颜色......但是如果您没有纯色作为主背景，则此方法将失败。

让我知道是否不清楚

如何从底部停止背景30px

1 个答案: