アメリカの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を使用してコードのコンパイルプロセスを監視します
mysql-5.7.9 では、ついにシャットダウン構文が提供されます。以前は、MySQL データベー...
/****************** * 高度な文字デバイス ドライバー ***********...
目次1. 実施計画の概要2. 実行計画の実践id:選択タイプ:テーブル:タイプ:可能なキー:鍵:キー...
多くの場合、クエリの結果は最大で 1 つのデータ レコードになることが予想されます。この場合、制限 ...
方法:実際のプロジェクトを例に挙げてみましょう。 .lk-ツールバー{ .el-入力{ 幅: 169...
目次render.js 部分create-context.js 部分差分部分Reactのソースコード...
<br />ナビゲーション設計は構造設計における主要なタスクの 1 つです。ソフトウェア...
要点CSS resize プロパティを使用すると、要素のサイズ変更可能性を制御できます。サイズ変更を...
1. 足場とは何ですか? 1. Vue CLI Vue CLI は、Vue.js をベースにした迅速...
MySQL データベースを使用すると、他のユーザーが定義したストアド プロシージャを他のユーザーが変...
以下の手順に従ってください1. request.jsコンテンツ: http リクエスト インターセプ...
目次ディレクトリ構造binディレクトリconfディレクトリlibディレクトリwebapps ディレク...
<input> はユーザー情報を収集するために使用され、終了ステートメントはありません。...
環境: 1. CentOS6.5 X64 2.mysql-5.6.34-linux-glibc2.5...
目次1. シナリオの説明2. 解決策オプションが多すぎる el-select コンポーネントの解決策...