問題タブ [background-position]

私はjsとjqueryにかなり慣れていないので、我慢してください。

背景の位置を変更して、＃button1をクリックしながら＃div1に1％を追加し、＃button2をクリックしながら＃div1に-1％を追加したいと思います。

jQueryでこれをどのように達成できますか？

また、ボーナスの質問：これらはphpを介して動的に生成されます。js-scriptでphpを使用して、IDが正しくなるようにすることは可能ですか？

このような：

それ以外の場合は、jsでループを作成する方法も学ぶ必要があります;）

編集：フォローアップの質問：

ボタンをクリックしたときに、この値でテキストフィールドを更新するにはどうすればよいですか？また、上/下ボタンも追加したい場合は、どうすれば変更できますか？本当にありがとう！

前もって感謝します！-サイモン

私のスクリプトは、ボタンをクリックすると背景の位置を動的に変更することになっています（現在の値から1パーセントを加算または減算します）。FxとChrome、およびie8でも正常に動作します（私は信じています）が、ie7では動作しません。

これが私のコードです：

これを引き起こす可能性のあるものについてのアドバイスをありがとう。-サイモン

http://cambridgeuplighting.com/testimonials

このコードは、Safari、IE7、および IE8 では機能しますが、FF 3.5.7 では機能しません。このコードは、div にカーソルを合わせると、小さな背景アイコンの背景を変更します。

誰か助けてくれませんか？本当にありがとう。

CSS スプライトと background-position を使用して動的な幅のボタンをいくつか作成したいと思いますが、私が望むことが可能かどうかはわかりません..

ボタンには左側、中央、右側があり、必要に応じて中央が繰り返されるようにしたいと思います。理想的には、これを幅 11px の 1 つの画像で構成して、左右の幅が両方とも 5px で、中央が 1px 繰り返されるようにしたいと考えています。CSS で定義して、画像の中央の 1 ピクセルを使用し、必要な (不明な) 幅の場合に繰り返す方法はありますか?

通常、私は同様の結果を得るために 2 つの画像を使用しました。

Prototype を使ってシンプルで使いやすい CSS エディタを作っています。とにかく、背景位置の x/y 値を自分で取得できるかどうか疑問に思っていましたか?

このようなことができればいいのですが、残念ながらうまくいきません： element.getStyle('background-position-x);

これは、位置が単なる一般的なものではなく、「中心」のようなさまざまな形式になるためだと思います。

どういうわけか、理由はよくわかりませんが、以下はうまくいきません。背景の位置は、ホバーしても同じままです。理由がわかりません。別の方法でそれを行うこともできますが、なぜそれが機能しないのかを突き止めたいと思います。

誰かがこれを引き起こしている可能性があることを知っていますか？

前もって感謝します！

ライアン

CSS で Web ページの上部中央に画像を配置する必要があります。今、私background-image:は css を使用しているだけですが、これによりページの中央に配置されます。

これが私のコードです：

また、 を変更しbackground-position:ても、サイトの結果には影響がないようです。どんな助けでも大歓迎です。

基本的に3つの画像を組み合わせたCSSスプライトである画像を作成しました。サイズは278x123なので、基本的には278x41の3枚の画像です。

私がやろうとしているのは、背景の位置を変えてそのアニメーションを作ることです。

私は多くのことを試しましたが、あまり機能しない解決策の1つは次のとおりです。

どうすればそれができますか？

基本的には、次のことを行う必要があります。-背景の位置を「0px0px」に設定し、「0px -41px」、「0px -82px」の順に移動して、「0px0px」から再度ループします。それらの間にfadeIn（）効果があるのも素晴らしいでしょう。

何か案は？

ありがとうございました。

背景画像をアニメーション化して、設定されたピクセル数だけ下に移動しようとしていますが、ページの中央に留まります。要素をもう一度クリックすると、一番上に戻る必要がありますが、それでも中央に残ります。以下は現在のコードです。

数値のみを受け入れるため、「center」を渡すことはできません。私の目標は、ページの中心をピクセル (幅 = (幅 / 2) - 700;) で計算し、この大まかな位置にアニメーション化することです (通常、スクロールバーのために数ピクセルずれてから、中心に移動します)。 .css() 呼び出しを使用します。

問題は、IE がボールをプレーしたくないということです。IE はまったくアニメーションしません。Firefox/Safari/Chrome はすべて期待どおりに動作します。

以下は実際の例です: http://recklessnewmedia.com/new/# (上部の「メール キャンペーン」をクリックします)。

ありがとう

モバイルサファリのバックグラウンド位置に問題があります。他のデスクトップブラウザでは正常に動作しますが、iPhoneやiPadでは動作しません。

「background_top.png」と「background_bottom.png」の両方が左にずれすぎています。私はグーグルで検索しましたが、私が知る限り、バックグラウンドポジションはモバイルサファリでサポートされています。また、キーワード（ "top"、 "center"など）、px、および％のすべての組み合わせを試しました。何かご意見は？

ありがとう！

更新：これが.htmlファイルのマークアップです。他のブラウザーでデザインとレイアウトが適切に表示されます:(上記のcssも更新しました）

両方の背景画像は非常に幅が広​​く（〜2000px）、任意のサイズのブラウザでスペースを占有します。

PS使用できるCSSショートカットがおそらくいくつかあることは知っていますが、今のところ、コードを表示できるように整理するのが好きです。