この章では、CSS でスプライトを使用する方法を紹介します。 cssのスプライト画像（スプライト画像）の使い方を誰でもわかるbackground属性（コード例）の紹介。困っている友人は参考にしていただければ幸いです。
1. CSS でのスプライトの使い方
スプライトの使い方を紹介します。スプライトを使用する前に、まずスプライトとは何かを知る必要があります。 。スプライトとは何かを知り、スプライトの原理を理解して初めて、スプライトの使用について話すことができます。
1. CSS スプライトとは何ですか?
css スプライト (スプライト) は、文字通り「CSS スプライト」と訳され、「CSS 画像スプライト」、「CSS マップ位置決め」または「CSS 画像スプライト」、「CSS 画像スプライト」とも呼ばれます。 「CSS画像スプライト」 「スプライト画像」はWeb画像アプリケーションの処理方法です。実際には、ページに含まれるすべての散在する画像を 1 つの大きな画像に含めることになります。これにより、ページにアクセスしたときに、以前のように読み込まれた画像が 1 つずつ表示されることはなくなります。
2. cssスプライト(スプライト)の使い方
cssスプライト(スプライト)とは、実際には複数の画像を1枚の画像に結合し、その背景をレイアウトするものです。 CSS バックグラウンド位置決めテクノロジーによる Web ページ。画像を使用する必要がある場合、現在の段階では、CSS 属性のbackground-imageをbackground-repeat、background-positionなどと組み合わせて使用して画像を表示します。
3. コードの実装:
使用したスプライト素材: incn.png
コード:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文子居中</title>
<style>
* {
margin: 0;
padding: 0;
}
.sprites{
width: 200px;
margin: 50px auto;
}
.sprites div {
margin: 5px;
}
.sprites span {
float: left;
width: 20px;
height: 20px;
background-image: url(CSSでスプライトを使用するにはどうすればよいですか?背景属性の概要 (コード例));//引用精灵图（sprite）：incn.png
background-size: 60px 40px;
}
.sprites1 {
background-position: 0 0;
}
.sprites2 {
background-position: -20px 0;
}
.sprites3 {
background-position: 0 -20px;
}
.sprites4 {
background-position: -20px -20px;
}
.sprites5 {
background-position: -40px 0;
}
.sprites6 {
background-position: -40px -20px;
}
</style>
</head>
<body>
<div class="sprites">
<div><span class="sprites1"></span>付款图标</div>
<div><span class="sprites2"></span>存款图标</div>
<div><span class="sprites3"></span>删除图标</div>
<div><span class="sprites4"></span>粘贴图标</div>
<div><span class="sprites5"></span>笑脸图标</div>
<div><span class="sprites6"></span>编辑图标</div>
</div>
</body>
</html>レンダリング:
使用されるコア コード:
background-image: url(CSSでスプライトを使用するにはどうすればよいですか?背景属性の概要 (コード例)) ;---背景画像を設定しますスプライト画像 (incn.png) を参照するスプライトのスパン要素;
background-size: 60px 40px; ---背景画像のサイズを調整し、スパンの背景画像を作成します。スプライト ボックスの要素は幅 (60px) と高さ (40px) に固定されます。
background-position 属性 --- これは最も重要なコード、画像の位置決めです。スプライト ボックスのスパン要素の背景画像の位置を設定または取得します。使用する前に、background-image 属性を指定する必要があります。
説明: 背景の背景位置には 2 つの値があります。最初の値は左への距離の値 (正または負の値) を表し、2 番目の値は上への距離の値 (正の場合があります) を表します。または否定的）。正の数値の場合、背景画像をオブジェクトボックスの背景画像として使用する場合の左上への距離を表します。負の数値の場合、背景画像をボックスの背景画像として表します。オブジェクトの背景画像をボックス オブジェクトの左側を越えてドラッグし、この背景画像の表示を開始する距離を指定します。
2. CSS 背景属性のその他の属性値の紹介
上記のbackground-imageに加えて、background -size、background-position、背景属性 属性値に加えて、次のような他の属性値もあります。
1.background-color: 通常、要素の背景色を定義します。背景が定義されています。
body {background-color:#b0c4de;}レンダリング:
?x-oss-process=image/resize,p_40 "153690995485532CSSでスプライトを使用するにはどうすればよいですか?背景属性の概要 (コード例)")
background-repeat：repeat-x || repeat-y || no-repeat ;repeat-x: 水平タイル; repeat-y: 垂直タイル; no-repeat: タイルなし。 3. 背景添付: 背景画像を固定するか、ページの残りの部分と一緒にスクロールするかを設定します。 構文:
background-repeat：scroll || fixed || inherit；scroll: デフォルト属性。ページの残りの部分とともにスクロールする背景画像を設定します。 fixed: 背景画像を次のように設定します。 fix;inherit:background-attachment の設定を親要素から継承することを指定します。
以上がCSSでスプライトを使用するにはどうすればよいですか?背景属性の概要 (コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
Google Fontsをタグ付けし、Goofonts.comを作成する方法Apr 12, 2025 pm 12:02 PMGoofontsは、開発者妻とデザイナーの夫によって署名されたサイドプロジェクトであり、どちらもタイポグラフィの大ファンです。 Googleにタグを付けています
時代を超越したWeb開発記事Apr 12, 2025 am 11:44 AMPavithra Kodmadは、彼らが変化したWeb開発に関する最も時代を超越した記事のいくつかであると考えていることについて、人々に推奨事項を求めました
graphQlの練習JavaScript APIでクエリをクエリしますApr 12, 2025 am 11:33 AMGraphQL APIの構築方法を学ぶことは非常に挑戦的です。ただし、10分でGraphQL APIを使用する方法を学ぶことができます！そして、それは私が完璧になったことがあります
円にタイプを設定します...オフセットパス付きApr 12, 2025 am 11:00 AMここでは、Yuanchuanからの合法的なCSSの策略があります。このCSSプロパティオフセットパスがあります。むかしむかし、それはモーションパスと呼ばれ、その後改名されました。私
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
メモ帳++7.3.1
使いやすく無料のコードエディター
MinGW - Minimalist GNU for Windows
このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポート ライブラリとヘッダー ファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。
EditPlus 中国語クラック版
サイズが小さく、構文の強調表示、コード プロンプト機能はサポートされていません
SublimeText3 Linux 新バージョン
SublimeText3 Linux 最新バージョン
