CSS画像結合技術(スプライト画像)の詳しい説明

CSS画像結合技術(スプライト画像)の詳しい説明

CSS画像結合技術

1. 画像のステッチ

  • 画像ステッチング技術は、個々の画像を収集する技術です。
  • 画像の多い Web ページは読み込みに時間がかかり、複数のサーバー要求が生成される場合があります。
  • イメージステッチングを使用すると、サーバー要求の数が減り、帯域幅が節約されます。画像ステッチの例

CSSスタイルを使用すると、必要な画像の部分を表示できます

詳細なコードは次のとおりです。

<!doctypehtml>
<html>
<ヘッド>
    <メタ文字セット="utf-8"/>
    <title>画像の統合</title>
    <スタイル>
        。箱{
    幅:200px;
    マージン:0 自動;
    オーバーフロー:非表示;
}
.iton{
    幅:43px;
    左マージン:10px;
    高さ:44px;
    フロート:左;
    背景:url(images/img_navsprites_hover.gif) 繰り返しなし;
}
.span01{
    背景位置:0 0;
}
.span02{
    背景位置:-47px 0;
}
.span03{
    背景位置:-91px 0;
}
.span01:ホバー{
    背景位置:0 -45px;
}
.span02:ホバー{
    背景の位置:-47px -45px ;
}
.span03:ホバー{
    背景の位置:-91px -45px ;
}
    </スタイル>
</head>
<本文
<div class="box">
        <span class="iton span01"></span>
        <span class="iton span02"></span>
        <span class="iton span03"></span>
    </div>
<本文>
</html>

実行結果は次のとおりです。

このエフェクトは、マウスを要素の上に置いたときにフローティング スタイルを追加し、background-position を設定して画像の位置を変更し、継続的に更新します。アドバイスをお待ちしています。

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

<<:  W3C チュートリアル (5): W3C XML アクティビティ

>>:  MySQL の大きなテーブルで大量のデータを一括削除する方法

推薦する

tomcat8の最新のLinuxインストールプロセス

ダウンロード参考:ダウンロードするコアパッケージを選択してくださいダウンロード後、ファイルをサーバー...

ReactのPropsの簡単な比較

目次クラスコンポーネントのプロパティ比較浅い同等の浅い比較機能コンポーネントの簡単な比較先週面接に行...

MySQL FAQ シリーズ: ibdata1 ファイルのサイズが突然増加しないようにする方法

0. はじめにibdata1 ファイルとは何ですか? ibdata1 は、innodb システム テ...

HTMLは無効なテーブル幅設定の問題を解決します

テーブルに table-layer:fixed スタイルを設定し、テーブル内の行が結合されていること...

layui をベースにしたログインページの実装

この記事の例では、ログインページを実装するためのlayuiの具体的なコードを参考までに共有しています...

MySQL における ESCAPE キーワードの使用法の詳細な説明

MySQL エスケープエスケープとは、エスケープ文字の本来の意味を意味します。エスケープ文字の目的は...

Centos 6.5 での mysql-community-server. 5.7.18-1.el6 のインストール

次のコマンドを使用して、MySQL Serverがインストールされているかどうかを確認します。 [r...

JSコードコンパイラMonacoの使い方

序文私が必要としているのは、構文の強調表示、関数プロンプト、自動行折り返し、およびコードの折りたたみ...

CentOS 7 でソースコードから Openssh をインストールする方法

環境: CentOS 7.1.1503 最小インストール依存パッケージをダウンロードします: yum...

マウスオーバーボタンアニメーションを実現する純粋な CSS3 パート 2

前の 2 つの章を終えて、ボタンのフローティング アニメーションについて新たな理解が得られましたか?...

Vue から React への変換入門ガイド

目次デザインコンポーネント通信ライフサイクルイベント処理品格とスタイルクラススタイル条件付きレンダリ...

ポップアップはすべて不正なものではありません。ウェブサイトのポップアップをデザインするためのヒント

ポップアップニュースは国内のインターネットサービスでは一般的であり、リアルタイムプッシュ方式はウェブ...

VantフレームワークをWeChatアプレットに導入するプロセス全体の記録

序文WeChat ミニプログラムのネイティブ UI が少し物足りないと感じることがあるので、サードパ...

88 秒で 1,000 万件のレコードを MySQL データベース テーブルに挿入する方法

私が使用しているデータベースはMySQLデータベースバージョン5.7ですまずデータベーステーブルを自...