2

我有一个段落，我使用引用图像作为背景和<p>标签中的大量文本。我正在尝试在标签之前显示一个图像，所有文本都与图像右侧对齐，<p>但图像似乎显示在其中，这是我不想要的。我创建了一个小提琴以使其更容易看到：JSFiddle

这是我的CSS：

.container_12 {
    margin-left: auto;
    margin-right: auto;
    width: 960px;
}

.blockquote {
    font-size: 14px;
    font-family: 'Times', serif;
    font-style: italic;
    color: #222222;
    background-color: #f7f7f7;
    background-image: url(http://somesite/Icon_Quote.png);
    background-position: left top;
    background-repeat: no-repeat;
    min-height: 40px;
    padding: 10px;
    margin-bottom: 10px;
}

.QuoteTextToLeft {
    float: left;
    margin: 50px 10px 10px 10px;
}

和 HTML：

<div class="container_12">
<div>
    <img class="QuoteTextToLeft" src="http://someothersite/man.png"
      alt="" width="200" height="250" /> 
    <a id="andrew_reeder"></a>
    <p class="blockquote">START HERE - this is a test, ... (snipped)
        <br />
        <br />this is a test, a test of the emergency broadcast system....
        <br />
        <br />this is a test, a test of the emergency broadcast system....
        <br />
        <br />this is a test, a test of the emergency broadcast system....
        <br />
        <br />Someone who cares
        <br />
        <br />Some title</p>
</div>

我想要做的是将图像显示在<p class="blockquote">标签之外，以便将引用图像定位在它说“从这里开始”的位置。

这是它目前的样子： 图片

这就是我想要的样子： 图片2

4

3 回答 3

5

你最好的选择是不要让它成为背景图像。

.blockquote {
    font-size:14px;
    font-family:'Times', serif;
    font-style:italic;
    color:#222222;
    background-color:#f7f7f7;
    min-height:40px;
    padding:10px;
    margin-bottom:10px;
}
.blockquote:before {
    content:url('http://pokemonresource.wikinet.org/w/images/pokemonresource/uploads/a/a8/Icon_Quote.png');
    margin-right:10px;
    float:left;
}

这是一个 CSS3 解决方案……我们正在利用:before伪类来指定在每个元素之前要添加的.blockquote内容。

我们将content属性设置为图片的 url（取决于它是什么类型的文件，你会得到不同的结果——因为这是一个 png 文件，它会定期显示图片）。

为了使引号的其余部分而不是第一行，我们使用float:left. 最后，为了调整间距，我们添加了一个右边距。

这适用于任何尺寸的图像。

这是您原始版本的修改版本：Demo

这是一个放大的图像（引用保持不变）：Demo

另外，我想指出您正在使用不推荐使用的方法来调整图像大小——请使用 CSS 而不是width/height属性来执行此操作。

最后一件事：除非您使用的是 XHTML 文档类型，否则您不需要在某些元素的末尾使用正斜杠。这是一种古老的自闭合标签方法，但 HTML5 文档类型不需要它。:)

于 2013-07-10T02:30:34.283 回答
0

这可能会奏效：http: //jsfiddle.net/charlesberube/YfTHK/3/

<p> 上的背景图像需要移动以将其推过图像的右边缘，并且图像需要额外的右侧边距以帮助对齐文本。

.blockquote {
  ...
  background-position: 200px top;
  ...
}

.QuoteTextToLeft {
  float: left;
  margin:50px 40px 10px 10px;
}

这个解决方案有点脆弱，因为它依赖于知道图像的大小才能正确定位提供引用的背景图像并对齐文本；这可能是也可能不是问题，具体取决于您的情况。

于 2013-07-10T02:07:12.967 回答
0

仅更改一种 CSS 样式。演示http://jsfiddle.net/yyene/DSBqu/4/

旧的 CSS

background-position:left top;

新的 CSS

background-position:170px 5px;
于 2013-07-10T02:38:19.630 回答