7

段落を取得しましたが、段落の開始と終了をユーザーに示す「マーカー」を表示したいと考えています。

左上に背景画像を表示しても問題ありませんが、背景画像を右下端に配置する方法がわかりません。画像を左上に配置するためのCSSは次のとおりです。

p[class] {
    background-image: url("../../image/my_image.gif");
    background-position: left top;
    background-repeat: no-repeat;
}

追加のhtml要素を使用したソリューションを探していません!!! CSS のみを使用して動作する必要があります。段落が疑似前要素と疑似後要素を設定しているため、ここではそれらを使用できません。質問は次のとおりです。

追加のhtml要素を使用せずにcssのみ(疑似要素なし)で背景画像をhtml要素の左上と右下に配置するにはどうすればよいですか?

4

3 に答える 3

12

シリルは近くにいますが間違っています。それが必要ですbackground-position: right bottom;

一般に、数値を使用することは可能です。したがって、次のようにbackground-position: right bottom;書くこともできます。background-position: 100% 100%;background-position: left top;background-position: 0 0;

これに関するW3C仕様も見てください：http://www.w3.org/TR/css3-background/#the-background-position

上記の sree のコメント: これは完全に間違っていleft: 0px ; top:0px;ます。position:relativeposition:absolute

編集：複数の背景を使用したい場合は、次のことに注意してください。

p[class] {
    background-image: url("../../image/my_image.gif"), url("../../image/my_image.gif");
    background-position: left top, right bottom;
    background-repeat: no-repeat;
}

クロス ブラウザーのサポートについては、http://caniuse.com/#feat=multibackgroundsをご覧ください。

挨拶する

トム

于 2012-05-04T12:28:02.020 に答える
4

ブラウザのサポートが問題にならない場合は、CSS3 の複数の背景を使用できます: http://www.css3.info/preview/multiple-backgrounds/

于 2012-05-04T12:35:29.937 に答える
1

background-position: bottom right代わりに試してみるのはleft topどうですか？

于 2012-05-04T12:20:32.330 に答える