CSS画像結合技術（スプライト画像）の詳しい説明
|
CSS画像結合技術 1. 画像のステッチ
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 の大きなテーブルで大量のデータを一括削除する方法
推薦する
localStorageの有効期限を設定するいくつかの方法
目次問題の説明1. 基本的な解決策2. 中間的な解決策3. 高度なソリューション4. ハードコアソリ...
Linux チェックアップ、Linux の状態 (ネットワーク IO、ディスク、CPU、メモリ) を把握
目次1. コアコマンド2. 共通コマンド3. コアコマンドの詳細な説明3.1、ps補助3.2 トップ...
MySQL 5.7 mysql コマンドラインクライアントの使用コマンドの詳細
MySQL 5.7コマンドを使用するMySQLコマンドラインクライアント1. パスワードを入力してく...
Dockerコンテナシェルスクリプトの実行ステータスを監視する方法
シナリオ会社のプロジェクトはDockerでデプロイされています。原因不明ですが、コンテナが時々停止し...
Apache Bench ストレステストツールの実装原理と使用状況分析
1: スループット（1秒あたりのリクエスト数）サーバーの同時処理能力を定量的に表したもので、reqs...
Vueはv-showを通じて最高の効果を達成します
html <div class="totop" v-show="...
変数が空かどうかを判定するシェルの方法の概要
シェルで変数が空かどうかを判断する方法シェルプログラミングでは、パラメータのエラーチェック項目に、変...
Webサービスのリモートデバッグとタイムアウト動作原理の分析
Webサービスのリモートデバッグ.NET では、WEBSERVICE のリモート デバッグ機能はデフ...
Docker コンテナのネットワーク設定によく使われるコマンドの詳しい説明
基本的なネットワーク構成Docker はイメージに基づいて複数のコンテナを「開く」ことができ、各コン...
Tomcat 例外の解決方法 (リクエスト ターゲットに無効な文字が見つかりました。有効な文字は RFC 7230 および RFC 3986 で定義されています)
1. シナリオ表示Tomcat ログに次の例外情報が時々報告されます。何が起こっているのでしょうか...
Vueの7つの値転送メソッドの詳細な説明
1. 父から息子へ子コンポーネントにpropsフィールドを定義し、その型は配列です (フィールド値の...
arcgis.js は、マップ本体の表示範囲を制御し、領域を超えた場合に自動的にバウンスするようにします (実装のアイデア)
目次背景効果アイデア背景少し前に、会社のプロジェクトで問題が発生しました。地図のベースマップ領域の範...
WeChatアプレットのスワイパードットのドットをスライダーに変更する方法
目次背景ターゲット効果アイデア成し遂げるスワイパーは変更を聞きますカスタムドットモジュール変更イベン...
Linux のスクリーンコマンドとその使い方
画面紹介Screen は、コマンドライン端末切り替え用に GNU プロジェクトによって開発されたフリ...
pdf.js を使用して Vue で PDF ファイルをプレビューする方法
ページ上で PDF をプレビューすると、一部のファイルは印刷またはダウンロードできません。現時点では...