如何将图像合并到我的文本中？ HTML CSS

Question

我正在我的网站上工作，我希望有一个很好的报价。为此，我希望在文本的开头和结尾都有两个大的引号图像，就像文本一样，当我调整窗口大小时，它会随文本移动。

我尝试使用带有display：block和图像作为背景的span，但它就像一个div。

如果我使用div和margin来正确放置它，当我调整窗口大小并且不再与我的文本对齐时，它会停留在同一个位置。

你会建议什么？

修改

这就是我想要的：

Answer 1

你可以尝试这个原始的CSS，你可以根据需要定制它。

＆＃13;

＆＃13;

html {
    background: gray;
}
blockquote {
    background: white;
    display: inline-block;
    position: relative;
    padding: 30px 30px
}
blockquote:before {
    content: '"';
    position: absolute;
    font-size: 48px;
    top: 10px;
    left: 10px;

}
blockquote:after {
    content: '"';
    position: absolute;    
    font-size: 48px;
    bottom: -10px;
    right: 10px;
    
}

＆＃13;

<blockquote>
This is a sample of a blockquote.
</blockquote>

＆＃13;

＆＃13;

＆＃13;

编辑： 上面的代码使用blockquote本身的固定引号，结尾引号不会在段落的末尾移动。

这个人应该这样做。

＆＃13;

＆＃13;

html {
    background: gray;
}
blockquote {
    background: white;
    display: inline-block;
    position: relative;
    padding: 30px 30px
}
.ql,.qr {
    position: relative;
}
.ql:before,.qr:after {
    content: '"';
    position: absolute;
    font-size: 48px;
}
.ql:before {
    top: -15px;
}

＆＃13;

<blockquote>
    <span class="ql"></span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; I am a sample of blockquote with a big quotation marks.<span class="qr"></span>
</blockquote>

<blockquote>
    <span class="ql"></span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; I am a sample of blockquote with a big quotation marks. You see it moves according to the length of what I'm saying.<span class="qr"></span>
</blockquote>

＆＃13;

＆＃13;

＆＃13;

Answer 2

这个怎么样..

<p class="your-quote-wrapper">
   <span><img src="/quote-icon-left.png"></span>Blabla blabla text<span><img src="/quote-icon-right.png"></span>
</p>

您的跨度为inline-block

p.your-quote-wrapper{
    display:inline-block;
}

Answer 3

使用跨度是正确的选择，但您应将其设置为inline或inline-block（或完全不管它）。正如您所发现的那样，将其设置为阻止使其占据整个宽度。

如果您可以使用图像以外的其他内容，则可以在引号字符周围放置一个范围，并使用任何unicode或其他字体系列作为引号。然后你可以在它周围设置一个范围并按照你的意愿设置它，同时保持一个内联文本引用。