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 の大きなテーブルで大量のデータを一括削除する方法
推薦する
Linux環境でrmによって誤って削除されたファイルを回復する方法
目次序文RMの後には希望はあるのでしょうか？最前線を使ってファイルを取得するextundeleteを...
集める価値のある 15 個の JavaScript 関数
目次1. 数字を逆にする2. 配列内の最大のn個の数値を取得する3. 階乗を計算する4. 現在の動作...
MySQL データベース テーブルとデータベース パーティショニング戦略
まず、テーブルを分割する必要がある理由について説明します。データシートが数百万に達すると、1 回のク...
MySQL の単一テーブル クエリ操作例の詳細な説明 [構文、制約、グループ化、集計、フィルタリング、並べ替えなど]
この記事では、MySQL の単一テーブル クエリ操作について説明します。ご参考までに、詳細は以下の通...
フロントエンドが習得すべき、複数列の等高レイアウトを実現するための CSS テクニック
1. はじめにページを作成しているときに、複数列のレイアウトに遭遇することがあります。各列の内容が異...
LED を使って Linux カーネルを使い始める方法を探る
目次序文LEDトリガー探索を始めるLEDデバイス登録LEDディレクトリ類推によって理解するクラスディ...
Presto をインストールし、Docker で Hive を接続する詳細なプロセス
1. はじめにPresto は、ギガバイトからペタバイトに及ぶデータ ソースに対してインタラクティブ...
HTML における DTD の使用法の概要
DTD はマークアップの文法規則のセットです。これは XML 1.0 仕様の一部であり、HTML フ...
Windows 10 64 ビット版に MySQL 5.6.35 をインストールするためのグラフィック チュートリアル
1. MySQL Community Server 5.6.35をダウンロードするダウンロードアドレ...
Nginx Httpモジュールシリーズにおけるautoindexモジュールの具体的な使用法
ブラウザ モジュールの主な機能は、http リクエスト ヘッダーの「User-Agent」の値とブラ...
MySQL 挿入時間の 8 時間の違いの問題の解決方法
MySQL挿入時の8時間の時差の問題を解決する通常、jdbc の URL にはいくつかのパラメータを...
mysql8.0.19 でパスワードを忘れた場合の完璧な解決策
おすすめの読み物: MySQL 8.0.19 は、間違ったパスワードを 3 回入力するとアカウント ...
js でクラスセレクターと名前属性セレクターを実装する手順の例
jQuery の登場により、DOM の操作効率が大幅に向上し、開発がより高いレベルに引き上げられまし...
VMware のインストールと使用時の問題と解決策
仮想マシンは使用中であるか、接続できません次のようなエラーが報告された場合解決まずこのページにアクセ...
MySQL トリガー構文とアプリケーション例
この記事では、例を使用して MySQL トリガーの構文とアプリケーションを説明します。ご参考までに、...