CSSでスプライトを使用するにはどうすればよいですか?背景属性の概要 (コード例)-CSSチュートリアル-php.cn

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

青灯夜游

リリース： 2018-09-14 15:55:46

オリジナル

16361 人が閲覧しました

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