问题使用CSS定位引用<blockquote>图像</blockquote>

Question

开this page我试图在报价单周围放置报价图片，但他们不会坐好。

这是CSS：

    blockquote {
    padding-left:10px;
    color:#444;
    font-style: normal;
    width: 500px;
    background: #ff9999 url(/wp-content/themes/primus/primus/images/quoleft.png) left top no-repeat;
}
blockquote p {
  padding: 0 100px;
  background: #ff9999 url(/wp-content/themes/primus/primus/images/quoright.png) right bottom no-repeat;
}

我希望理想地保持图像大小相同。我只想让文本停止重叠图像。我尝试将.blockquote的宽度指定为500px但它似乎没有任何区别。

任何想法都会受到欢迎。谢谢 - 塔拉

Answer 1

两件事：

1. 为了看到背后的图像 你不应该指定的文本 内段的背景颜色;使 它改为transparent。
2. 由于另一个属性（.entry p）更具体，因此未应用指定的填充。您可以将此blockquote填充设置为!important，但通常不建议这样做，另一个选项是通过添加.entry p类使这个填充比另一个（.entry）更具体。请注意，只有具有父.entry类的块引用才会以这种方式选择。 （more info about specificity）

css：

blockquote {
  padding-left: 10px;
  color: #444;
  font-style: normal;
  width: 500px;
  background: #ff9999 url(/wp-content/themes/primus/primus/images/quoleft.png) left top no-repeat;
}

.entry blockquote p {
  padding: 0 100px;
  background: transparent url(/wp-content/themes/primus/primus/images/quoright.png) right bottom no-repeat;
}

Answer 2

尝试添加此属性：

.entry p {
    margin: 5px 5px 5px 15px;
    padding: 0px 40px 0px 0px;
    line-height: 20px;
    font-family: Tahoma,Georgia, Arial,century gothic,verdana, sans-serif;
    font-size: 13px;
}

我设法得到以下内容：

希望有所帮助（：

Answer 3

根据您需要的浏览器支持，您可以使用CSS：

在没有图像的情况下进行尝试

blockquote {
  padding: 0;
  margin: 0;
  border: 1px solid blueviolet;
}
blockquote:after,
blockquote:before {
  color: #ccc;
  font-size: 4em;
  line-height: 0;
  height: 0;
  vertical-align: -0.5em;
  display: inline-block;
}
blockquote:after {
  content: "”";
  margin-left: 0.05em;
}
blockquote:before {
  content: "“";
  margin-right: 0.05em;
  margin-bottom: -0.5em;
}

直播example here （仅在Firefox和Chrome上测试）