简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
ホームページ > ウェブフロントエンド > CSSチュートリアル > 本文

CSSでスプライトを使用するにはどうすればよいですか?背景属性の概要 (コード例)

青灯夜游
リリース： 2018-09-14 15:55:46
オリジナル
16328 人が閲覧しました

この章では、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

CSSでスプライトを使用するにはどうすればよいですか?背景属性の概要 (コード例)

コード: 

<!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>
ログイン後にコピー

レンダリング:

CSSでスプライトを使用するにはどうすればよいですか?背景属性の概要 (コード例)

使用されるコア コード:

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;}
ログイン後にコピー

レンダリング:

CSSでスプライトを使用するにはどうすればよいですか?背景属性の概要 (コード例)

##body {background-color:#b0c4de;}ページ全体の背景色を次のように設定します: #b0c4de


CSS では、通常、色の値は次の方法で定義できます:

Hex - 例: "#ff0000";

RGB - 例: "rgb (255,0,0)";

色の名前 - 例: "赤"。

2.background-repeat: 背景画像のタイリング方法を定義します (タイリングではなく、水平または垂直)。

構文: 

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 サイトの他の関連記事を参照してください。

関連ラベル：
css
ソース：php.cn
前の記事：純粋な CSS を使用して、ホバー時にボタンを右に移動する効果を実現する方法 (ソースコード添付) 次の記事：CSS スタイルの共通属性 (概要)
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
function_exists() はカスタム関数を決定できません Function test () {return true;} if (function_exists ('test')) {echo "テストは関数です";
から 2024-04-29 11:01:01
0
2
1766
Google Chromeのモバイル版を表示する方法 こんにちは、先生、Google Chrome をモバイル版に変更するにはどうすればよいですか?
から 2024-04-23 00:22:19
0
10
1906
子ウィンドウは親ウィンドウを操作しますが、出力は応答しません。 最初の 2 つの文は実行可能ですが、最後の文は実装できません。
から 2024-04-19 15:37:47
0
1
1624
親ウィンドウには出力がありません document.onclick = function(){ window.opener.document.write('私は子ウィンドウの出力です');
から 2024-04-18 23:52:34
0
1
1532
CSS マインド マッピングに関するコースウェアはどこにありますか? コースウェア
から 2024-04-16 10:10:18
0
0
1570
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト：福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！