問題タブ [background-position]

以下が機能しない理由は誰でも知っています。アニメートせずにcssを直接設定するだけで機能します。//div.css( {backgroundPosition: "bottom left"} );

私の目標は、ユーザーがウィンドウをどのように調整しても、ブラウザ ウィンドウ全体に広がる画像バーを中央に配置することです。それは簡単ですが、私が望んでいるのは、画像が「中央」のままで、一定のループで定期的に右にスクロールすることです。

スクロールバーを作成せずに画像を好きなだけ広くすることができるので、今は背景画像でこれを達成しようとしています。さらに、水平方向に繰り返す組み込みの css 機能は、「ループ」効果を実現する簡単な方法です。

背景画像をアニメーション化するために、次の jquery コードを使用しています。

残念ながら、このコードが起動された瞬間に背景が中央に配置されなくなり、ブラウザー ウィンドウが調整されたときにサイト コンテンツの残りの部分と同期して移動しなくなります。背景画像を残りのコンテンツと同期させながら、右にシフトする簡単な css/jquery コマンドがありませんか?

IEで問題が発生しているのは、フレキシブル/流体レイアウトの要素の背景画像のみです。

基本的に、垂直方向に並べて表示するには、背景画像（1px x 1px）が必要です。レイアウトが全幅の場合、背景画像は左から676ピクセルの位置にあり、パーセンテージに変換すると70.56367 ％になります（676px divide by it's container of 958px）。

これはFirefox、Chrome、Safariで正常に機能しますが、IE（6、7、8）では機能しません。背景の位置は、パーセンテージが小数ではなく完全な数値である場合にのみ機能するようです。70％または71％などに設定すると、背景の位置が変わります。

これが私が持っているものとそれがブラウザにどのように表示されるかです：

また、背景の位置を別々のX値とY値として設定してみました（ただし、同じ結果です）。

Firefox（v3.6.3）：

Chrome（12.0.742.100）：

Safari（5.0.2）：

Internet Explorer（6、7、および8-すべて同じ結果）：

だから私の質問は、これはブラウザが全体ではないパーセンテージを計算できないIEの問題ですか？または、私が見逃している修正や何かがありますか？

以下のようなasp.netに画像コンポーネントがあります：

ご覧のとおり、この画像の幅と高さを設定していますが、これを行うことで face-images.jpg (3*170 = 510 * 191) が要素領域で引き伸ばされます!
しかし、face-images.jpg には 3 つの画像 (170*191) が含まれており、css と jquery でそれらの位置を制御したいので、この行為はしたくありません!
div 要素を使用してこの作業を実行できることはわかっていますが、asp.net の画像コンポーネントについてはどうでしょうか。
以下のようにレンダリングした後のその画像（html）：

しかし、以下の css がこの画像で機能しない理由:

また

また

この問題は別の div で修正できますが、この方法では代替テキストが失われます。これはSEOにとって重要だと思います。

流動的で柔軟な湾曲したコーナー ボックスを作成したいと考えています。理想的には、コンテンツがボックスの上部/下部に表示されるように、汎用性が高い必要があります。

当然、4 つの要素 (div) と 1 つの画像を使用できるはずです。IE6 を除いて、ほぼすべてのブラウザーでこれを機能させることができます。

http://www.schillmania.com/projects/dialog2/basic.htmlのコードを変更 して、次のマークアップと css を作成しました。

大きな単一のボックス画像 (2000px H/W) を使用しました。この方法のアイデアは、アルファ透明度 (コーナー、シャドウなど) をオーバーラップなどなしで使用できるということです。

.

問題は IE6 です。背景画像の垂直方向の配置に似た処理を拒否します。上位 2 つの div (.tl と .tr) の背景位置を上から 50% に変更しようとしましたが、IE6 では 0 のままです。

フル/ロングハンドの背景プロパティ (background-image/background repeat/background-position) を使用してみました。また、x/y バージョン (background-position-x/background-position-y) などを試しました。

_height: または _overflow-y: プロパティを使用して IE が必要な高さを伸ばすようにすると、画像を垂直方向に配置する機能が損なわれるようです。

これどうやってするの？

私の質問は、gif をさらに進めて position: を選択できない理由です-60px。私はラッキーなことを試してきました...何か提案はありますか？これを jsFiddle でお見せしたかったのですが、GIF をサイトにアップロードする方法がわかりません。

CSS

私はサイトを持っており、私のページの 1 つで、エディターのように見える div を使用しています。この div とその上のコンテンツに背景を含めることができます。divをスクロールしている間、この背景を固定位置にとどめたいと思います。

私のコードはこれに似ています：

div内をスクロールすると、背景は固定されたままで正常に動作します。問題は、ページ全体をスクロールすると動いていることです。

何が問題なのか誰か知っていますか？

前もって感謝します

ユーザーがボタンをクリックしたときに、要素の背景を現在の位置からアニメーション化しようとしています。最初のクリックでこれを行うことはできますが、その後のクリックは失敗します。

これが私のコードです...

編集：

以下に示すように、これは、クリックするたびに0にリセットされてから再度アニメーション化されるIEを使用している場合を除いて、うまく機能します。

これが私の言いたいことへのリンクです... http：//jsfiddle.net/TdaSV/

解決策（正しい方向に押された結果）：

CSS スプライトを使用して jQuery のダイアログ コードを改善し、ダイアログ ボーダーのアニメーションも追加したいと考えています。

これを行うには、すべてのアートワークを 1 つの png ファイル、css スプライトに入れたいと思います。

私の問題は、2 台または 3 台のモニターに最大化するダイアログをサポートするために、CSS スプライト ファイルに幅 5000 ピクセル/高さのボーダー グラフィックを配置する必要があることです。css スプライト イメージの選択した部分のサイズを変更する方法が見つからないためです。

基本的に、スプライト イメージの領域 (t、l、w、h) から、幅と高さが異なるページの DIV または IMG にサイズ変更したいと考えています。知りたいのですが、これは可能ですか？background-position はこれをまったくサポートしていないようです。

How can I scale an image in a CSS spriteの最初の解決策を試しましたが、それを使用して機能させることができませんでした。

新しい background-size プロパティを background-position と組み合わせて使用​​しようとしましたが、それも私が望む結果を生成しません。

このページでは、私は永遠に取り組んできました。このコラムの見出しは「Bid xAsk」です：http ：//www.sellmycalls.com/so-bg-pos.png

それぞれのセルの背景には、セル内の数値の相互の比率を示す棒グラフがあるはずです。

したがって、各セルには背景色があります：灰色; およびbackground-image：all-white;。灰色の背景に（十分な大きさの）画像を適切に配置できません。実際、現在の化身では、画像はまったく表示されません。

画像の背景位置を正しく設定するにはどうすればよいですか？列の一番上の<td>は、次のようにスタイル設定されます。

どうもありがとうございました！