Html 将双引号图像环绕文本

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

---

但是现在如果我在图像中有双引号（

quote1.jpeg

和

quote2.jpeg

），如果我在伪选择器中添加

，它就不起作用了。为什么不呢？

您需要使用

url（）

语法指定图像：

p.aboutus:：before{
内容：url（'../images/quote1.jpeg'）；/*或任何位置*/
}
p、 关于……之后{
内容：url（'../images/quote2.jpeg'）；
}

---

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

除非您需要一些非常特殊的样式，否则可以在引号中使用纯文本，而不是图像

下面是一个例子，每个例子

第一个使用纯文本，第二个使用图像。它们的外观几乎完全相同（在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;
}

---

@凯：演示中文本的包装方式存在问题。在某些情况下，部分文本似乎环绕在右引号下方（取决于浏览器宽度）。这是由于文本的行高非常大，这是由于将大引号作为内联内容造成的。为了避免这种情况，图像必须足够短，以适合文本的预期行高。

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