css - 如何从底部停止背景 30px

Question

我有一个要引用的背景图片，但我希望它在距引用底部 30 像素左右处停止。

当前的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;
}

这将“伪造”距底部 30 像素的偏移量。将您的 p 文本包装在将获取背景图像和显示 block 的范围内以应用填充。

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

如果不清楚请告诉我