問題タブ [background-position]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
jquery - jQueryでスパンの内容に応じて背景位置を設定する
スパン要素の数値内容に一致するように背景画像の位置を変更したいと思います。
私のhtml：
したがって、幅400pxのスライディングスケールを表すdiv＃ecoSliderと、数値を与えるspan＃ecoPercentageがあります。スパンからその値を取得し、バックグラウンド位置に適用したいと思います。
これまでの私のjQuery：
私はこれを機能させることができないようです、私は何が間違っているのですか？
よろしくお願いします。
jquery - Jquery経由で背景画像のy位置のみを変更する
ホバー機能でボタンの背景画像のy位置を変更したい。xpos を保持する簡単な方法はありますか、それとも最初に位置を取得し、それを分割して $.css() で再度使用する必要がありますか?
誰かがそれらのいずれかをホバーした場合、3 つのスパンの背景位置をすべて変更する必要があります。したがって、 bt_first:hover は使用できないようです。
ここに私の使用法があります。xpos の値を変更したくないところに #should stay same# と書きました。
これが私のhtmlです。
そしてCSS：
css - CSSを縮小するにはどうすればよいですか? プロパティ [ background-position ] の省略形?
background-positionスプライト アイコンの位置について、 私のサイトのソース コードを 19 文字のバイトを浪費する文字と混ぜ合わせて見てください。
background-position
単独で使用するのは問題ありませんが、何百ものスプライト アイコンを設定すると、ばかげたバイト浪費になります。だから私の質問は:この長い単語を置き換えることができるよりスマートな省略形はありますか? もしそうなら、それは私のページの半分のバイトを節約するでしょう!
下の写真でその狂気を見てください...
乾杯、そして大歓迎です！
アップデート：
すべてのアイコンには、独自の一意のアイコンと一意の背景オフセットがあることに注意してください。
jquery - jQueryアニメーションの背景位置
私はこれを機能させることができないようです。
高さと幅はアニメーション化されますが、背景はアニメーション化されません。
css - 1ページだけで途切れる背景画像
中央に配置され、垂直方向に繰り返される背景画像が、最新ニュースページでのみ壊れているという問題があります。
特にサイト内の他のすべてのページで問題がなく、サイズなどが異なるページのセクションがないため、なぜそれが壊れているのかわかりません。
私はfirebugを使用してページのすべての側面を検査しましたが、それでも問題の原因を見つけることができません。助けていただければ幸いです。
css - IE8 background-position on :hover ファイルを移動しない
ホバーしたときに画像を変更する background-position メソッドを使用しています。これは、FF、Chrome、および Safari では正常に機能しますが、IE8 では機能しません。背景画像は、アルファ透明度を含む .png です。コードを W3C バリデーターで実行しましたが、有効なので、互換モードに入る必要はありません。
関連する HTML コードのスニペットは次のとおりです。
そして関連するcss：
ヘルプ？
javascript - 画面の中央のウェブサイトの背景？
このトリックは多くの Web サイトで見たことがあり、自分のプロジェクト用に作りたいと思っています。どんな画面サイズにも対応できるように、非常に大きな
画像があります。
背景画像を訪問者のウィンドウの中央に配置したいと考えています。
つまり、スクロールしている間、ウィンドウのコンテンツは移動しますが、背景はそのままで、垂直方向と水平方向の中央に配置されます。 background.jpg
ところで、視聴者のほとんどは古い安っぽい PC を持っているので、JS の場合は、ちらつきを抑えたほうがよいでしょう。
jquery - jqueryは背景をアニメーション化します-Firefoxの位置
私はこの背景画像スライダーをクロームとサファリで動作させましたが、Firefoxでは何もしません。何か助けはありますか？
私もこれを試しましたが、何もしません
css - CSSスプライト画像+背景-その一部を繰り返す
バックグラウンドで [CSS スプライト画像にある] 画像の一部を繰り返すことはできますか?!
例のように:
背景位置: -13px トップ; background-repeat : 繰り返し-y;
スプライト画像全体を繰り返したので...
html - CSSの背景位置がずれない
この問題は説明が少し難しいです。
PNG スプライトを使用して 48x48px のアイコンを作成し、クラスごとに背景をシフトしています。
例えば、
(さまざまなアイコンに対して、これらの背景位置シフト クラスがさらに 35 ほどあります。)
問題は、bino、sale、cart、またはその他の 36 個のアイコンを Icon クラスの後の 2 番目のクラスとしてスプライトに配置しても、PNG ファイルの 0px、0px にある背景画像を取得するだけです。 .
奇妙な点は、Dreamweaver のデザイン ビューで完全に表示されることですが、Chrome/Safari などでライブ ビューまたはプレビューに移動するとすぐに、アイコンがシフトされるのではなく、すべてデフォルト アイコンに切り替わります。
Chrome の開発者ツールは、background-position プロパティが適切にシフトされていることを示していますが、視覚的にはアイコンが正しくありません。
明確にするために、私はこれまで何度もこの手法を問題なく使用してきました-ただ悪い日を過ごしただけです.
何か案は？