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 の大きなテーブルで大量のデータを一括削除する方法
推薦する
VMware で Nginx+KeepAlived クラスタ デュアルアクティブ アーキテクチャを展開する際の問題と解決策
序文負荷分散には nginx を使用します。アーキテクチャのフロントエンドまたは中間層として、トラフ...
ダッシュボードを実装するためのjQueryプラグイン
jQueryプラグインは、参考のためにダッシュボードを実装します。具体的な内容は次のとおりです。一般...
Dockerコンテナでの静的ウェブサイトレイアウトの実装
サーバーの配置数日間無料で使用できるクラウドサーバー（Alibaba Cloud、Huawei Cl...
LinuxベースのApacheウェブサイトサービス構成の詳細な説明
オープンソース ソフトウェアである Apache は、最も広く使用されている Web アプリケーショ...
WeChatアプレットで画像の幅と高さを取得する方法
起源最近、私は要件 A に取り組んでいます。そこには、次のように記述される小さな機能ポイントがありま...
Dockerイメージの作成、アップロード、プル、デプロイを理解するための記事
目次1. 画像1. 鏡とは何ですか? 2. 画像の構成と目的(1) Dockerファイル（２）スクラ...
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...