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 デモを次に示します。

1 つ目はプレーンテキストを使用し、2 つ目は画像を使用します。外観はほぼ同じです (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 に答える