3

在此页面上，我试图在块引用周围放置引用图像，但它们不会正确放置。

这是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，但似乎没有任何区别。

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

4

3 回答 3

3

两件事情：

  1. 为了看到文本后面的图像，您不应该为内部段落指定背景颜色；transparent代替 它。
  2. 由于另一个.entry p更具体的属性 ( )，未应用指定的填充。您可以将此块引用填充设置为，但通常不建议这样做，另一种选择是通过添加类!important使这个比另一个 ( ) 更具体。请注意，只有具有父类的块引用才会以这种方式被选中。（有关特异性的更多信息）.entry p.entry.entry

的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;
}
于 2011-04-30T18:44:21.257 回答
1

尝试添加此属性：

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

我设法得到以下内容：

样本输出

希望有所帮助（：

于 2011-04-30T18:42:00.440 回答
0

根据您需要的浏览器支持，您可以尝试不使用图像，使用 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;
}

在此处输入图像描述

此处的实时示例 （仅在 Firefox 和 Chrome 上测试）

于 2015-10-19T20:15:35.267 回答