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 の大きなテーブルで大量のデータを一括削除する方法
推薦する
tomcat8の最新のLinuxインストールプロセス
ダウンロード参考:ダウンロードするコアパッケージを選択してくださいダウンロード後、ファイルをサーバー...
ReactのPropsの簡単な比較
目次クラスコンポーネントのプロパティ比較浅い同等の浅い比較機能コンポーネントの簡単な比較先週面接に行...
MySQL FAQ シリーズ: ibdata1 ファイルのサイズが突然増加しないようにする方法
0. はじめにibdata1 ファイルとは何ですか? ibdata1 は、innodb システム テ...
HTMLは無効なテーブル幅設定の問題を解決します
テーブルに table-layer:fixed スタイルを設定し、テーブル内の行が結合されていること...
layui をベースにしたログインページの実装
この記事の例では、ログインページを実装するためのlayuiの具体的なコードを参考までに共有しています...
MySQL における ESCAPE キーワードの使用法の詳細な説明
MySQL エスケープエスケープとは、エスケープ文字の本来の意味を意味します。エスケープ文字の目的は...
Docker プラグインを使用して IDEA のクラウド サーバーにプロジェクトをリモートでデプロイする方法
1. ポート2375を開くdocker.serviceを編集する vim /lib/systemd/...
Centos 6.5 での mysql-community-server. 5.7.18-1.el6 のインストール
次のコマンドを使用して、MySQL Serverがインストールされているかどうかを確認します。 [r...
JSコードコンパイラMonacoの使い方
序文私が必要としているのは、構文の強調表示、関数プロンプト、自動行折り返し、およびコードの折りたたみ...
CentOS 7 でソースコードから Openssh をインストールする方法
環境: CentOS 7.1.1503 最小インストール依存パッケージをダウンロードします: yum...
マウスオーバーボタンアニメーションを実現する純粋な CSS3 パート 2
前の 2 つの章を終えて、ボタンのフローティング アニメーションについて新たな理解が得られましたか?...
Vue から React への変換入門ガイド
目次デザインコンポーネント通信ライフサイクルイベント処理品格とスタイルクラススタイル条件付きレンダリ...
ポップアップはすべて不正なものではありません。ウェブサイトのポップアップをデザインするためのヒント
ポップアップニュースは国内のインターネットサービスでは一般的であり、リアルタイムプッシュ方式はウェブ...
VantフレームワークをWeChatアプレットに導入するプロセス全体の記録
序文WeChat ミニプログラムのネイティブ UI が少し物足りないと感じることがあるので、サードパ...
88 秒で 1,000 万件のレコードを MySQL データベース テーブルに挿入する方法
私が使用しているデータベースはMySQLデータベースバージョン5.7ですまずデータベーステーブルを自...