Question

我想出了如何在我的报价上添加一个开头引号（使用背景），但是我如何在我的风格中添加一个结束引号。在罗素威尔逊是一个伟大的四分卫之后，我想添加一个结束引号图像。

如果我不是首选方式，你能否提出实现这一目标的最佳做法？

<p>
    <span class="inline-quote">Russell Wilson is a great quarterback</span>
    Russell Carrington Wilson is an American football quarterback for the Seattle Seahawks of the National Football League. Wilson was selected by the Seahawks with the 12th pick in the third round of the 2012 NFL Draft.
</p>

.inline-quote {
    background: url('http://www.pearl-guide.com/forum/images/Eloquent/miscblue/quote_icon.png') left top no-repeat;
    background-position: 15% 5px;
}

Answer 1

每个元素只能有一个背景。所以制作一个伪元素！

.inline-quote { position: relative }
.inline-quote::after { /* Insert it after */
    content: ''; /* Required for it to show up */
    position: absolute; /* Stretch it */
    top: 0; right: 0; bottom: 0; left: 0;
    background: url('http://www.pearl-guide.com/forum/images/Eloquent/miscblue/quote_icon.png') left top no-repeat; /* Same background */
    background-position: 15% 90%; /* Position it in the lower right */
    transform: scaleX(-1); /* Flip it */
    -webkit-transform: scaleX(-1);
}

http://jsfiddle.net/bmj942y4/5/

您还应该使用blockquote元素。 http://jsfiddle.net/bmj942y4/7/

Answer 2

你可以使用：before和：after

Demo

.inline-quote:before, .inline-quote:after{
    display:inline-block;
    width: 20px;
    height:20px;
    background: url('http://www.pearl-guide.com/forum/images/Eloquent/miscblue/quote_icon.png');
    background-repeat: no-repeat;
    content: '';
}

.inline-quote:after{
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}

Answer 3

您可以使用倍数背景图像

示例

background-image: url('img1.jpg'), url(img2.jpg); background-position: 15% 5px, 85% 5px;

使用

Firefox 3.6+

Safari 1 +

Chrome 1.3 +

Explorer 9 +

Opera 10.5 +

更多信息
http://www.css3.info/preview/multiple-backgrounds/

我如何在我的风格背景中放置一个结束报价图像？

3 个答案: