Web ページ上の複数のアイコンを 1 つの画像に配置し、それぞれを css で表示します icon_html/css

Web ページ上の複数のアイコンを 1 つの画像に配置し、それぞれを css で表示します icon_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:31:58

オリジナル

1588 人が閲覧しました

現在、Web ページに多数のアイコンが表示されるのは普通のことですが、プロジェクト内のページで使用されるアイコンは、使用されるとページに直接リンクされることがわかりました。。

Web サイトが外部ネットワーク上にある場合、またはネットワーク速度が低すぎて、多数のアイコンが使用されている場合、ブラウザとサーバー間の同時接続数は制限されており、通常は 4 ～ 8 です。表示が遅すぎるか、タイムアウトが発生する可能性があります。

もちろん、CDN を使用したり、同時ブラウザ数に応じて画像ファイルのドメイン名分散保存を実行したりする方が良いでしょうが、そのような条件がすべて利用できるわけではありません。

一般に、アイコンファイルは可能な限り小さく作成されますが、それでも、50 個の 1k ファイルと比較して、1 個の 50k ファイルをダウンロードする方が非常に有利です。

それでは、画像を分割する機能がないため、ページ上の画像内に単一のアイコンを表示する方法を説明します。

まず、アイコン画像がツリービューで一般的に使用されていると仮定します。

2 つの div を持つ単純なページを作成し、これら 2 つの div にそれぞれフォルダーとファイルのアイコンを表示する必要があります。

<!DOCTYPE html><html>    <head>        <meta charset="utf-8">        <style>        </style>    </head>    <body>        <div></div>        <div></div>    </body></html>

ログイン後にコピー

表示方法は非常に簡単で、要素のサイズをアイコンのサイズに設定し、画像を要素の背景として使用し、画像の左と上を対応するアイコンを表示します。

デフォルトのスタイルを定義し、要素のサイズを指定します。ここでのアイコンは通常どおり 32*32 です。

            .tree-default{                width:32px;                height:32px;            }

ログイン後にコピー

フォルダーアイコンの表示スタイルを定義します。これは、アイコン画像を背景として使用し、アイコンの位置に従って左と上の座標値を調整することを意味します。

            .tree-folder{                background: url("images/tree_icons_32px.png") -260px -4px no-repeat;            }

ログイン後にコピー

ファイルアイコンの表示スタイルを定義し、ファイルアイコンの位置を調整します。

            .tree-file{                background: url("images/tree_icons_32px.png") -100px -68px no-repeat;            }

ログイン後にコピー

次に、要素のスタイルを設定します。

完成した効果:

この種の処理には条件がないわけではありません。 1 つの画像にすべてのアイコンを配置する必要はありません。 . 1枚の写真でも、数が多すぎる場合は複数の写真に分割して配置することができます。

すべてのコード:

        <div class="tree-default tree-file"></div>        <div class="tree-default tree-folder"></div>

ログイン後にコピー