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 の大きなテーブルで大量のデータを一括削除する方法
推薦する
Vue のディスパッチとブロードキャストの自己実装の詳細説明 (ディスパッチとブロードキャスト)
解決すべき問題主にコンポーネント間のクロスレベル通信用なぜディスパッチとブロードキャストを自分で実装...
MySQL 8.x msi バージョンのインストール チュートリアル (画像とテキスト付き)
1. MySQLをダウンロードする公式サイトのダウンロードアドレス https://dev.mys...
Win7 システムでの MySQL 5.7.11 の詳細なインストール チュートリアル
オペレーティング システム: Win7 64 ビット Ultimate Edition MySQL ...
Vue で Openlayer を使用して読み込みアニメーション効果を実現する
注意: スコープアニメーションは使用できません。 ！ ！ ！ GIF経由 <テンプレート>...
クラウドデータ移行サービスの観点から見たMySQLの大規模テーブル抽出モードの原理分析
概要: MySQL JDBC 抽出にはどのような方法を使用すればよいでしょうか? その方法を説明しま...
MySQLの半同期の詳細な説明
目次序文MySQL マスタースレーブレプリケーションMySQL でサポートされているレプリケーション...
JavaScriptの知識ポイントの詳しい説明
目次1. JavaScriptの基礎2. 基本的なJavaScript構文3. JavaScript...
lastInfdexOf 関数の MySQL 実装例
MySQL では lastIndexOf に似た関数を使用する必要がある場合もありますが、すぐに使用...
K8Sの高度な機能を理解するための記事
目次K8Sの高度な機能高度な機能要約するkubectl サービスの問題のトラブルシューティングK8S...
MYSQL は、指定されたユーザーのランキングとクエリを実装します。ランキング関数 (並列ランキング関数) のサンプルコード
序文この記事は主に、MYSQL でランキングを実現し、指定ユーザーランキング関数 (並列ランキング関...
MySQL 8.0.11 Mac 用インストール ガイド
MACはmysql8.0をインストールします。具体的な内容は次のとおりです。 1. ダウンロードアド...
UbuntuへのDocker CEのインストール
この記事は、Ubuntu 17.10 での Docker CE のインストールを記録するために使用さ...
docker tagとdocker pushの使い方の詳しい説明
Dockerタグの詳しい説明docker tag コマンドの使い方と、ローカルイメージを daocl...
Vueはソースコード付きのリファレンスライブラリのメソッドを使用します
monaco-editor-vueの公式ソースコードは次のとおりです。インデックス 'mon...
vue ルーティング ビュー router-view のネストされたジャンプの実装
目次1. app.vueページを修正する2. ログインページを作成する (/views/login/...