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 の大きなテーブルで大量のデータを一括削除する方法
推薦する
MYSQL データベース GTID はマスタースレーブレプリケーションを実現します (超便利)
1. Mariaソースを追加する vi /etc/yum.repos.d/MariaDB.repo...
React Nativeでシンプルなゲームエンジンを作る
目次導入始めるReact Nativeゲームエンジンの簡単な紹介React Nativeでスネークゲ...
Alibaba Cloud ESC サーバー シングルノード MySQL の Docker デプロイメント
1. msyqlの高速バージョンをダウンロードする docker pull hub.c.163.co...
クリーンで美しいウェブデザインのための4つの原則
この記事では、 Webデザインに関連するこれら4 つの原則について説明します。これら4 つの原則を念...
ウェブ クラスターの Docker Stack 展開方法の手順
Docker はますます成熟し、その機能もますます強力になっています。 Docker Stack を...
複数の条件を持つ MySQL クエリ メソッド
複数の条件を持つ MySQL クエリ環境: MySQL 5.7 where ステートメントに複数の ...
Linux での Docker と portainer の設定方法
1.Docer CEをインストールして使用するこの記事では、CentOS 7 を例に Docker ...
Ubuntu でホームディレクトリを新しいパーティションに移行する詳細なチュートリアル
ユーザーのホーム ディレクトリがどんどん大きくなってきたら、ホーム ディレクトリを新しいパーティショ...
Java は Apache.POI を使用して HSSFWorkbook を Excel にエクスポートします
Apache.POI の HSSFWorkbook を使用して Excel にエクスポートします。具...
Tomcatのクラスロードメカニズムを説明する記事
目次- 序文 - - JVM クラスローダー - 1. JVMクラスローダー2. クラスローダーのソ...
MySQL マスタースレーブ遅延問題の解決方法
今日は、マスタースレーブ遅延が発生する理由とその対処方法について説明します。しっかり座って出発の準備...
Vueは複数列レイアウトドラッグを実装します
この記事では、マルチカラムレイアウトドラッグを実装するためのVueの具体的なコードを参考までに共有し...
jQuery は拡張アニメーションによるナビゲーション バー効果を実装します
展開アニメーション効果のあるナビゲーションバーを設計してカスタマイズし、デモを作成してみました。設計...
Alibaba Cloud ServerにMySQLデータベースをインストールする方法の詳細な説明
序文学習中に Zookeeper をインストールする必要があったため、仮想マシンに常に問題が発生した...
JavaScript の矢印関数と通常の関数の違いの詳細な説明
この記事では、JavaScriptにおけるアロー関数と通常の関数の違いについて解説します。具体的な内...