HTMLの\のCSS：背景画像の位置

私たちは、このHTMLののCSS：背景画像の位置

background:url(../images/bg.jpg) top left;

のように配置することができます知っているが、私はこの

位置に上部中央に背景を行うと、右に400個のピクセルを移動したいです...どのようにそれを行うことができます

出典

2011-01-30 Moon

Firefoxは '計算値（）'を実装するよりも、他のブラウザを待ち、例えば、私は、これはFirefoxで動作するだろうと思うのをしてみましょう： 'のbackground-position：-moz-CALCトップ（50％ - 400ピクセル）;' 。 https://developer.mozilla.org/ja/CSS/-moz-calc – Harmen

編集：これはIEで行うことが頑固だったので、私はそれのようにそこに動作させるためにいくつかの余分な情報を追加しましたよく

EDIT2：もIE6でこの仕事をするために、MicrosoftのSuperPreviewでアプリケーションを使用していました。 FF3.6とIE8、そしてSuperPreviewのIE6でテストされています。

body { margin: 0px; padding: 0px; text-align: center; } .parentDiv { margin: 0 auto; text-align: left; width: 2px; /* non-zero width */ } .childDiv { position: relative; text-align: left; background-image: url("../images/bg.jpg"); left: 399px !important; /* !important is not honored by IE6 */ left: 600px; /* overridden in all but IE6 */ width: 300px; height: 300px; }
あなたはこのようなコードを持っているでしょう
（それは厳密にDOCTYPEを設定することが重要です）：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> ... <div class=parentDiv><div class=childDiv>Child Content</div></div>

変更widthの値

は巣に自分のオブジェクトを次のCSSを使用しますあなたの画像に基づいてchildDiv内のheight

出典

2011-01-30 16:49:42

このテクニックはうまくいきます...私は自分でやっていましたが解決策ではないでしょう... ie5のような古いブラウザや特にie6のユーザーのためのdivサイジングのための可変ページ高とクロスブラウザソリューションを考慮しているからです合計の22.5％です – Moon

私が提供した答えは現代のブラウザで動作します。 IE5/6用の特定のソリューションが必要な場合は、あなたの質問にそのことを明記しておきます。いずれにしても、これらのブラウザでこれを動作させるのは非常に醜いハックになります。 –

私はMicrosoft SuperPreviewのコピーを使ってIE6でこれをテストしました。このプログラムを使用してテストするのはあまり柔軟ではありませんが、望ましい効果が得られるようです。それに応じて回答を更新する。 –

これは、古典的なbackground-position表記を使用して現在行うことはできません。

JavaScriptを使用して要素の幅を計算し、それに応じて位置を設定するか、画像を透明にして右にプッシュする必要があります。これは最も簡単な解決策かもしれません。

出典

2011-01-30 16:38:02

と余白があるかもしれませんか？編集：nevermind – JCOC611

@JCOCうん、それはあなたがラッパー要素 –

で作業することができれば良い考えです。または余分な要素が中央に絶対的に配置され、余白が右に移動します。 – reisio

これは、バックグラウンド・クリップと背景の原点で行うことができるが、それは将来的には次のとおりです。http://www.css3.info/preview/background-origin-and-background-clip/

DIVまたはJavaScriptがそれを行う必要がありラッパーを。

出典

2011-01-30 16:46:15 madr

私はポジショニングとzインデックスを持つ<のdiv >で操作しようとする

出典

2011-01-30 16:47:41 giacoder

Javascriptではもっと簡単かもしれません。

Pseudocode: 
    Read the width of the enclosing element 
    Compute its center 
    Offset the center by desired amount of pixels 
    Set this new value as the position of the background image

出典

2011-02-02 06:29:42 iGbanam

HTMLの\のCSS：背景画像の位置

答えて

関連する問題