アメリカのYAHOOがページ制作で使用している画像統合技術。これらのアイコン、列背景、画像ボタンを定期的に統合してCSS呼び出しを容易にするのは、ある程度の時間がかかりますが、間違いなく費用対効果が高く、必要です。YSlowも強くお勧めします。 コードをコピー コードは次のとおりです。<div class="max">最大化</div> 両方のクラスは同じ画像を使用します。 コードをコピー コードは次のとおりです。.max { 幅:16px; 高さ:16px; 背景画像:url(/images/css-sprites.gif); background-repeat: no-repeat; // タイル状に表示したくない text-indent:-999em; //テキストを非表示にする方法 } その結果、上の画像の tag_icon.gif 内の画像は背景としてしか使用できず、必要な背景をまったく取得できなくなります。 background-position を指定していないため、デフォルトは 00 です。上記の tag_icon.gif の画像をご覧ください。さて、全体像の中で auther.gif を表す画像の位置を見つける必要があります。測定後、ボタンは Y 軸上で 350 ピクセルに配置され、ボタンは X 軸上で 50 ピクセルに配置されます。どうすればそれらを可視化できるでしょうか?明らかにコードは次のようになります。 コードをコピー コードは次のとおりです。.max { 背景位置: 50 -350px; } やった、やった! (注: 便宜上、この例ではスタイルを HTML に直接埋め込みます。実際には特別な場合を除き、この方法は使用しないでください)。 メリット<br />前回の記事で、CSSSprites が突然人気になった理由は、Web サイトのパフォーマンスを向上できるためだということを学びました。明らかに、これは大きな利点の 1 つです。通常の方法で生成された多数の画像が 1 つの画像に結合され、HTTP 接続の数が大幅に削減されます。 HTTP 接続の数は、Web サイトの読み込みパフォーマンスに大きな影響を与えます。 デメリット<br />保守性に関しては、これは一般的に諸刃の剣です。画像を変更するたびに、画像のコンテンツを削除したり追加したりする必要があり、少し面倒に思えるため、気に入る人もいれば、気に入らない人もいるかもしれません。そして、画像(特に数千ピクセルの画像)の位置を計算することも非常に不快なことです。もちろん、これらはパフォーマンスというスローガンの下で克服することができます。 画像の位置をある絶対値に固定する必要があるため、中心などの柔軟性が失われます。 前述したように、CSSSprites を使用するにはボックスのサイズを制限する必要があります。そうしないと、画像に干渉する可能性があります。つまり、CSSSprites は、一方向ではないタイリング背景が必要であり、Web ページのスケーリングが必要な状況には適していません。 YUI の解決策は、限られたスケーリングを維持できるように画像間の距離を増やすことです。 要約<br />パフォーマンスがすべてです。 CSSSpirites は推進する価値のある技術です。固定サイズのアイコンの置き換えなどの FIR に特に適しています。互換性を維持するために、画像の各部分の間にある程度の距離を保つことをお勧めします。 |
>>: TypeScriptはvscodeを使用してコードのコンパイルプロセスを監視します
親コンテナの幅は固定されています。子要素が親の幅を均等に分割するには、どのような方法がありますか?コ...
この記事では、二次リンクを実現するためのReactの具体的なコードを参考までに共有します。具体的な内...
仮想マシンはホストマシンにインストールされます。 CPU とメモリはホスト マシンと共有する必要があ...
序文MySQL のマスター/スレーブ レプリケーション関係は、厳密には「同期」または「マスター/スレ...
結果: html <nav id="nav-1"> <a cl...
序文JavaScript は習得が最も簡単な言語の 1 つであるため、成長と繁栄を続けており、市場に...
序文場合によっては、データベースのイントラネット アドレスしか知らず、イントラネット経由で接続できな...
JWT の紹介JWTとは正式名称はJSON Web Tokenで、現在最も人気のあるクロスドメイン認...
1. Webページを開くと503サービス利用不可が表示されますが、更新すると正常にアクセスできます。...
カルーセルとは何ですか?カルーセル: モジュールまたはウィンドウで、コンピューターでマウスをクリック...
目次1. 共有共通モジュール2. 共有マテリアルモジュール3. 共有確認ダイアログ1. 共有共通モジ...
レンダリング原理フォーム要素には、正規表現(携帯電話番号、メールアドレス、IDカードなど)をカスタマ...
Nginxはまず、設定ファイル内のどのserver{}ブロックを処理に使用するかを決定します。次のs...
序文最近、穴を掘ってスペースを作っているだけなので、心が空っぽになっているように感じます。テクノロジ...
導入: Nginx (エンジン エックスと同じ発音) は、BSD のようなプロトコルに基づいてリリー...