在文本周围包裹双引号图像

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>，则它不起作用。为什么不呢？

Answer 1

您需要使用url()语法指定图像：

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

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

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

Answer 2

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

这是一个JSFiddle demo，每个都有一个例子。

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

以下是代码的简化版本（有关详细信息，请参阅demo。）

<强>纯文本

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