3

我在段落中添加文本。我想在文本周围加上引号（作为图像）。

<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>在伪选择器中添加了，它就不起作用了。为什么不？

4

2 回答 2

5

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

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

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

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

于 2013-03-03T15:02:24.613 回答
1

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

这是一个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;
}
于 2013-03-03T17:24:41.627 回答