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

ホームページ

ウェブフロントエンド

htmlチュートリアル

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:31 AM

現在、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>

ログイン後にコピー

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

ホットトピック

Gmailメールのログイン入り口はどこですか？

7710

Java チュートリアル

1640

CakePHP チュートリアル

1394

Laravel チュートリアル

1288

PHP チュートリアル

1232

Related knowledge

HTMLは初心者のために簡単に学ぶことができますか？ Apr 07, 2025 am 12:11 AM

HTMLは、簡単に学習しやすく、結果をすばやく見ることができるため、初心者に適しています。 1）HTMLの学習曲線はスムーズで簡単に開始できます。 2）基本タグをマスターして、Webページの作成を開始します。 3）柔軟性が高く、CSSおよびJavaScriptと組み合わせて使用できます。 4）豊富な学習リソースと最新のツールは、学習プロセスをサポートしています。

HTML、CSS、およびJavaScriptの役割：コアの責任 Apr 08, 2025 pm 07:05 PM

HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。

HTML、CSS、およびJavaScriptの理解：初心者向けガイド Apr 12, 2025 am 12:02 AM

webdevelopmentReliesOnhtml、css、andjavascript：1）htmlStructuresContent、2）cssStylesit、および3）Javascriptaddsinteractivity、形成、

HTMLでの開始タグの例は何ですか？ Apr 06, 2025 am 12:04 AM

Anexampleapalofastartingtaginhtmlis、それはaperginsaparagraph.startingtagsaresentionentientiontheyinitiateelements、definetheirtypes、およびarecrucialforurturingwebpagesandcontingthomedomを構築します。