在文本周围添加双引号图像

Question

我正在添加一个段落中的文本，我想将引号（作为图像）包装在文本周围。

<p class="aboutus" style="font-style: impact;font-size: medium">
test test test test test test test test test test test test test test test test .
</p>

如果我想在文字周围添加双引号，这很好地实现了。

p.aboutus:before {
    content: '"';
}

p.aboutus:after {
    content: '"';
}

但是如果我的图片中包含双引号（quote1.jpeg和quote2.jpeg），并且我在伪选择器中添加了<img src>，它就不起作用了。为什么？

- user1411837

Answer 1

您需要使用 url() 语法指定图片的位置：

p.aboutus::before {
    content: url('../images/quote1.jpeg'); /* Or wherever it is */
}

p.aboutus::after {
    content: url('../images/quote2.jpeg');
}

请注意，URL是相对于包含样式表的位置而不是您的页面而言的。

- Ry-

---

@Kay：演示中文本换行存在问题。在某些情况下，部分文本似乎会在关闭引号下方换行（取决于浏览器宽度）。这是由于文本的非常大的行高造成的，这是由于将大型引号作为内联内容。为了避免这种情况，图像的长度必须足够短，以适应文本的预期行高。 - Matt Coughlin

Answer 2

除非您需要一些非常特殊的样式，否则使用纯文本作为引用可能已经足够，而不是使用图片。

这里有一个JSFiddle演示，其中包含每个示例。

第一个示例使用纯文本，第二个示例使用图像。它们在外观上几乎相同（在IE8/9/10、FF、Safari、Chrome、Opera中测试）。两者都允许显示任何大小的引用，而不会影响第一行和最后一行文本的行高（当大型图像内联添加时会发生这种情况）。

下面是代码的简化版本（请参见演示以获取完整细节）。

纯文本

.text-quotes blockquote {
    position: relative;
    margin: 0;
    padding: 8px 0 22px 0;
    text-indent: 36px;
}
.text-quotes blockquote:before,
.text-quotes blockquote:after {
    position: absolute;
    font-size: 60px;
}
.text-quotes blockquote:before {
    content: '\201C';   /* Left double quote */
    left: -36px;
    top: 8px;
}
.text-quotes blockquote:after {
    content: '\201D';   /* Right double quote */
    right: 0;
    bottom: -13px;
}

图片

.image-quotes blockquote {
    position: relative;
    margin: 0;
    padding: 8px 0 22px 0;
    text-indent: 36px;
}
.image-quotes blockquote:before,
.image-quotes blockquote:after {
    display: block;
    position: absolute;
    width: 27px;
    height: 21px; 
}
.image-quotes blockquote:before {
    content: url(http://www.forestpath.org/test/misc/double-quote-left.png);
    left: -35px;
    top: 0;
}
.image-quotes blockquote:after {
    content: url(http://www.forestpath.org/test/misc/double-quote-right.png);
    right: 35px;
    bottom: 0;
}

- Matt Coughlin