問題タブ [background-position]

私は background-position をあまり使用しないので、これを正しく行っていない可能性がありますが、CSS ルールが有効になっていません。

background-position:right 353px bottom 20px;

コードは次のとおりです。

HTML

CSS

編集

私が達成しようとしていることを説明する必要があるのではないかと思います。

h1 内に、ロゴ (幅 353) があります。
画面サイズによってはh1が353より大きくなる場合があります。

この場合、背景画像を img の隣 (左) に表示して、無地の背景色にうまくフェードインするようにします。

私はととととの要素<ul>を持っています。list-style:none;<li>padding:20px;background-image:url(images/bullet.gif) no-repeat -20px 10px;

弾丸は見えません。私が現在使用している回避策は、 background-position と element に対して -20px ではなく 0<li>ですposition:relative;padding-left:20px;margin-left:-20px;。

これを行うより良い方法はありますか？

編集:弾丸がボックスの外側にある必要があり<ul>ます。これが負のマージンを使用する理由です。

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

DIVimage-backgroundの位置でjqueryをアニメーション化しようとしました。この効果を行うには、 http：//keith-wood.name/backgroundPos.htmlを使用します。アニメーションはx軸上をスライドし、次の位置にあります。

1. 0
2. 50
3. 80
4. 110
5. 70
6. 50

正常に動作しますが、IE8では、すべてのステップで、最初にx位置0に移動し、その後、正しい位置に移動します。たとえば、手順4では、0から開始し、スライドアニメーションを110にします。80から開始する必要があるため、間違っています。

どうすればこれを修正できますか？

ここで、backgroundPositionjquery1.5.0にアニメーションがないことは既知のバグであることがわかります。まだ修正されていませんか？

jquery 1.4.4でアニメーション化したこのjsfiddleを参照してから、これを見て、jquery1.7.1でも機能しないことを確認してください。backgroundPosition

彼らがこれを修正しようとしているときのアイデアはありますか？

Chromeコンソールに次のような警告が表示されたので気になります。

event.layerXとevent.layerYは壊れており、WebKitでは非推奨になっています。近い将来、エンジンから削除される予定です。

アニメーション機能にjquery1.4.4を引き続き使用するのではないかと心配していますが、Chromeは次のアップデートで機能をプルします。

アップデート

受け入れられた答え、background-position-xとyを使用するという考えはFirefoxでは機能しません。今のところ、より良い解決策が見つかるまで、1.4.4に戻らなければなりません。

どうすればこれをまとめることができますか? メニューの項目がクリックされるたびに、2 つの特定の DIV の背景位置が変更され、選択を維持する必要があるこの Web サイトに取り組んでいます。

これが私の試みです：

最初に、変数「p」を作成して、選択したページの URL/アドレスを保存します。たとえば、私たちについている場合は、アドレス バーに次のようなものが表示されるでしょう。

website.com/index.php?p=aboutus

メニューの [about us] ボタンで、関数 changeBG onClick を呼び出してこれを行いました。

トリックを行うにはjavascriptが必要だと思いました。ここに在庫があります。

これは、ヘッダーに入るスクリプトです。

これが体に起こることです：

なぜこれがうまくいかないのか誰にもわかりますか？

問題のある動作については、このWebアプリのウィンドウのサイズを変更してみてください。ヘッダーとボックスは最小サイズになるとサイズ変更が停止しますが、背景画像はページの中央に配置され続けますが、これは非常にばかげているように見えます。

背景画像に関連するコードは次のとおりです。

background-positionが最小幅と高さを調整していなくても（つまり、ウィンドウは所定のサイズの後にサイズ変更を停止しますが、背景画像の中央に配置され続けます。

なぜこれをしているのですか？特定のポイントの後に画像が再センタリングされないようにするにはどうすればよいですか？

2つの背景画像が欲しい要素（ボタン）があります。1つはグラデーションで、もう1つはボタンの上に配置します。それ、どうやったら出来るの？

margin-topに似たようなものを追加する方法はありますか：-20px; またはそのようなもの？

jQueryを使用して要素のbackground-positionプロパティをアニメーション化する必要があります。デフォルトのjQueryアニメーション関数を使用するこのチュートリアルに従うと、運が悪かった。

http://snook.ca/archives/javascript/jquery-bg-image-animations

私の機能は次のようなものでした：

運が悪かったので、要素の垂直方向の背景位置を変更する独自の関数をコーディングしようとしました。次のようになります。

要素のY背景位置を-900にアニメーション化するには、次のような関数を呼び出します。

ここで、 step：内の変数（バックグラウンド位置Y）が0から-900に減少することに注意してください。

それはうまくいきますが、ここに私の問題があります。この後、jQuery .css（）関数を使用してこの背景位置を直接「0px0px」にリセットし、次のように再度アニメーション化する必要があります。

この場合、背景位置を「0px 0px」にリセットすると、パラメーターは0から300になりますが、-900から300になります。ここで、-900は、関数を呼び出して最初に設定した値です。

誰もが何が悪いのか知っていますか、それとも毎回正しい値を取るようにこのパラメータをリセットするにはどうすればよいですか？

CSS3プロパティの変換を変更して要素を回転させるそのような別の関数があります-rotate、そして私は同じ問題を抱えています。

ご協力いただきありがとうございます！

私はこの単純なHTMLを持っています：

といくつかのJavascript：

そのため、アニメーションがあまり良くなく、イージングがほとんど見られないにもかかわらず、マウスオーバー機能が正しく機能している場合..しかし、マウスアウト機能が機能していない場合、背景画像はピクセル上でも動かずにそこに座っています...

どうしたの？私は何を逃しましたか？

また：

これはChromeでのみ機能します...

だから再び何が問題なのか！バグは何ですか！何が恋しいの？

私はjQueryが初めてで、何かを動かそうとするのに少し苦労しています。

基本的に私は wordpress サイトを持っています。各ページにはbodyタグの異なる背景画像があります。ボタンをオンにしてから、ボディの背景画像を約 500px ドロップできるようにしたいと考えています。

基本的に、ページの上部に非表示の連絡先エリアがあり、ボタン ( a.contact) をクリックすると、非表示の連絡先エリア ( #contactArea) が上からドロップダウンして表示されますが、contactArea がドロップすると背景画像の一部が非表示になりますボタンをもう一度クリックするまで。

私が達成しようとしているのは、背景画像が常に表示されるように、非表示の contactArea が表示されたときに背景画像がドロップする (まだ完全に表示されている) ことです。私はそれが理にかなっていることを願っています?!

私のCSSコードは次のとおりです。

私の現在のjqueryは次のとおりです。

誰かがそれを助けることができれば、それは大歓迎です! :-)