CSSでのbackground-position属性の使用法の概要

background 属性は、CSS で最も一般的な属性の 1 つです。CSS カットアウトを実装するには、background-position 属性を 1 つだけ使用する必要があります。 background-position は、要素の背景画像の位置を制御するために使用されます。重要なのは、要素の左上隅を基準とした画像の左上隅の位置を実際に指定することです。 キーワード（上、右、下、左、中央など）、長さの値（px、em、remなど）、パーセント値。次のコンテンツでは、background-position 属性の使用法について説明します。

まず、php中国語ウェブサイトに関連する無料コースを学ぶことができます

1.「CSS 0 基本入門チュートリアル」
の

CSS背景

の章コースを学びます。

2. 「Dark Horse Programmer CSS ビデオ チュートリアル」の 背景とマージン ビデオ コースをご覧ください

background-位置属性の使用法

1

cssのbackground-positionプロパティ

background-positionプロパティは、背景画像の開始位置を設定します。

この属性は、元の背景画像 (background-image で定義) の位置を設定します。背景画像を繰り返す場合は、この点から開始されます。

ヒント: このプロパティが Firefox と Opera で適切に動作するようにするには、background-attachment プロパティを「fixed」に設定する必要があります。

2.

背景位置パーセンテージの原則

背景サイズ: 100% 自動の場合、背景画像の幅は要素の幅 * 100% であり、高さは比例して拡大縮小されることを意味します。詳細については、css3 背景を参照してください。

background-position のパーセンテージが親要素の幅に基づいて計算されると考えるのは自然ですが、background-position は実際にはそうではなく、独自の一連の原則があります。

3.

CSS での背景位置の使用

2 つの値のうちの最初の 1 つは水平方向の位置決めであり、これを x 軸の位置決めと呼びます。後者の値は縦方向の位置であり、これを y 軸の位置と呼びます。

値が 1 つだけの場合、デフォルトは X 軸方向です。Y 軸方向はデフォルトで上下に揃えられ、中央になります。

4. CSSはbackground-position属性を使用してスプライト画像のコードを詳細に完成させます

スプライト画像はCSSスプライトとも呼ばれ、CSS画像結合技術です。複数の小さなアイコンを結合する 画像に移動し、CSS の背景位置を使用して表示する必要がある部分を表示します。

Web ページの画像を読み込む際のサーバーへのリクエストの数を減らし、ページの読み込み速度を向上させ、IE6 でマウスをスライドさせたときに白く点滅する問題を解決します。

5.

背景シリーズ: 背景位置について知らないこと

背景画像のオフセット値を指定するために背景位置が使用されることはわかっています。これにより、画像を特定の位置から表示し始めることができます。 。 CSS スプライトは、複数の小さな画像を 1 つの大きな画像に結合し、background-position を使用して表示する必要がある領域を指定することで、HTTP リクエストをマージするという期待を実現します。

関連する質問と回答

1. background-position 写真をキャプチャした後は削除できない境界線があります

2.background-position の使用に関する混乱。

3. 背景の位置の割合について質問がありますか?

【関連おすすめ】

1. php中国語ウェブサイトの無料チュートリアル:

「CSSオンラインマニュアル」

2. php中国語ウェブサイトの無料ビデオチュートリアル:

「すぐにわかるHTML学習のビデオチュートリアル」

3. php 中国語 Web サイトの無料ビデオ チュートリアル:

「php.cn Dugu Jiijian (2) - CSS ビデオ チュートリアル」

以上がCSSでのbackground-position属性の使用法の概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。