2011-08-09 13 views
1

CSS3背景カスタマイズは強力なツールですが、私のために1つの機能が欠けています。私はいくつかの方法でバックグラウンド位置を設定することができますが、それらのいくつかの組み合わせが必要です。たとえば、動的にサイズ変更されたdivがあり、右の境界線から15pxの右中心の画像が必要です。私はこれを処理する方法を見つけることができません。 私は2つの修正を使用することができますが、どれも優雅ではありません。
1.ピクスの右側に15ピクセルの空白を残します。
2.私はこれを使用します:バックグラウンド位置:97%50%
しかし、2番目のケースでは、divのサイズを変更すると、計算された右マージンが正しくありません。 または、bg-imageの代わりに標準イメージを使用しますが、これを回避しようとしています。
だから、解決策はありますか?
ありがとうございます!CSSの背景位置の組み合わせタイプ

+0

右に行くにはdivのテキストが必要ですか?それとも、右から15pxでもかまいませんか? – Alex

+0

div内のテキストが左に揃えられます。そして、もちろん、テキストはimgを越えることができないので、右パディングを置く必要があります。 – marcias

+0

"そして、もちろんテキストはimgを通過できません。" XDに 'background-image'が使われているのとはかなり反対になります。イメージを上にテキストがない物理的なエンティティにしたい場合は、imgタグを使用して行くでしょう。私はあなたのためにその性質を一緒に置くことができます。 – Alex

答えて

2

CSS3は、それを可能にするためにbackground-positionを拡張します。たとえば、次の操作を実行できます。

background-position: right 15px bottom 15px; 

残念ながら、Operaは現在のところこれをサポートしています。

しかし、あなたがそれを必要とする一般的な理由は、15pxのパディングがあることです。その場合は、次のようにしてください:

background-origin: content-box; 
background-position: right bottom; 

すべてのCSS3ブラウザでサポートされています。

+0

これは絶対に私が探しているものです!大文字と小文字は、説明した通りです。パディングでは、画像が境界線から移動します。ありがとう! – marcias

関連する問題