未知の高さの要素の下部にイメージスプライトを配置する方法

私は、div要素の4つのコーナー：4つの「サブイメージ」からなるイメージスプライトを使用しています。スプライトは40ピクセル×40ピクセルです。各「サブ画像」は20ピクセル×20ピクセルです。各コーナーの「サブイメージは、スプライトの反対側の角にあり、たとえば、左上のサブイメージはスプライトの右下にあります。未知の高さの要素の下部にイメージスプライトを配置する方法

div要素の幅は440ピクセル、高さは100％です。上隅を取得しましたが、下隅を取得するにはどうすればよいですか？新しいスプライトを作成せずにこれを行う方法はありますか？ CSSルール。

background: -20px -20px no-repeat url(<path>), 420px -20px no-repeat url(<path>);

出典

2011-12-02 Tyler Crompton

これはストレートCSSで可能であるならば、私は知りません。 JavaScriptを開いて要素の高さを取得し、スプライトのCSSをその値で調整する必要があるかもしれません。 – Benjam

もし私がそれをしたら、私はブラウザのサイズ変更も処理しなければならないと思います。 JSを使用するのではなく、2つのスプライトを実行します。 :( –

これは確かにこの場合JavaScriptよりも良い方法でしょう。そして、反対側のコーナー画像と混同する必要はなく、「トップ」スプライトと「ボトム」スプライトを持つことができますしかし）。 – Benjam

はabsolute LY配置擬似要素にbackground-imagesを入れてください。

~~Demo~~

申し訳ありませんが、あなたの質問を読み違えは、ここでは「スプライト」と同じ手法である：

Demo

出典

2011-12-03 00:41:28 bookcasey

未知の高さの要素の下部にイメージスプライトを配置する方法

答えて

関連する問題