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 の大きなテーブルで大量のデータを一括削除する方法

推薦する

VMware で Nginx+KeepAlived クラスタ デュアルアクティブ アーキテクチャを展開する際の問題と解決策

序文負荷分散には nginx を使用します。アーキテクチャのフロントエンドまたは中間層として、トラフ...

ダッシュボードを実装するためのjQueryプラグイン

jQueryプラグインは、参考のためにダッシュボードを実装します。具体的な内容は次のとおりです。一般...

Dockerコンテナでの静的ウェブサイトレイアウトの実装

サーバーの配置数日間無料で使用できるクラウドサーバー(Alibaba Cloud、Huawei Cl...

LinuxベースのApacheウェブサイトサービス構成の詳細な説明

オープンソース ソフトウェアである Apache は、最も広く使用されている Web アプリケーショ...

WeChatアプレットで画像の幅と高さを取得する方法

起源最近、私は要件 A に取り組んでいます。そこには、次のように記述される小さな機能ポイントがありま...

Dockerイメージの作成、アップロード、プル、デプロイを理解するための記事

目次1. 画像1. 鏡とは何ですか? 2. 画像の構成と目的(1) Dockerファイル(2)スクラ...

Bash で山括弧を使用するその他の方法

序文この記事では、山括弧のその他の用途をさらに詳しく見ていきます。前回の記事では、山括弧 (<...

Mysql 主キー UUID と自動増分主キーの違いと利点と欠点

導入私はしばらくの間、postgresql データベースを使用していました。クラウドに移行した後、自...

Vueのsync修飾子の詳細な説明

目次1. 手順2. 修飾語3. .sync 修飾子4. まとめ1. 手順指示とは命令です。文字通りの...

Nginx のアンチホットリンクを設定する方法

実験環境• 最小限のインストール済みの CentOS 7.3 仮想マシン• 構成: 1 コア/512...

ノードをMySQLデータベースに接続する際に発生する問題と解決策

今日、MySQL の新しいバージョン (8.0.21) をインストールしましたが、ノード フレームワ...

MySQL のスケジュールされた完全なデータベースバックアップ

目次1. MySQLデータのバックアップ1.1、データをバックアップするためのmysqldumpコマ...

Linux での Docker と portainer の設定方法

1.Docer CEをインストールして使用するこの記事では、CentOS 7 を例に Docker ...

JavaScript の手ぶれ補正とスロットリングの詳細な説明

目次デバウンススロットル要約するデバウンス定義: スクロール イベントなど、短時間に連続してトリガー...

vite2.x は ant-design-vue@next コンポーネントのオンデマンド読み込みを実装します。

1. 使用バージョンバイト:2.0 ant-design-vue: 2.0.0-rc.8ヴュー:3...