CSSの背景とスプライト

今回は CSS の背景とスプライトについて説明します。CSS の背景とスプライトを使用する際の 注意事項 は何ですか?実際の事例を見てみましょう。

1. ラベルの背景色を設定する方法

CSS には、ラベルの背景色を設定するために特別に使用される

background-color: 属性があります。特定の単語 rgb rgba 16 進数

ショートカット キー:

bc background-color: #fff;

2. 背景画像を設定する方法

というプロパティがあります

background-image: url(); CSS で、これは背景画像を設定するために特別に使用される

ショートカット キーです:

bi background-image: url();

注:

1. 画像のアドレスは url() に配置する必要があります。画像のアドレスは、ネットワーク

アドレス

にすることもできます。2. 画像のサイズがラベルのサイズほど大きくない場合、画像は自動的に水平方向と垂直方向に並べられて埋められます。

3. Web ページに写真がある場合、サーバーは画像のデータを取得するリクエストを再度送信します

には

background-repeat

属性があります。背景画像のタイリング方法を制御するために特に使用される CSS

値: repeat デフォルトでは、水平方向と垂直方向の両方でタイリングが必要です

no-repeat は水平方向と垂直方向の両方のタイリングを必要としません

repeat-x ではタイルのみが使用されます水平方向repeat-yは垂直方向にのみタイル化します

ショートカットキー

bgrbackground-repeat:

アプリケーションシナリオ:

背景画像をタイル化することで画像のサイズを削減し、アクセス速度を向上させることができますウェブページ

4. 背景位置属性

1. 背景画像の位置を制御する方法

CSS には、背景の位置を制御するために特別に使用される

background-position

: というプロパティがあります。画像2. フォーマット:

background-position: 水平方向垂直方向

3.1 特定の位置名詞水平方向: 左中央右垂直方向: 上中央下

3.2 特定のピクセル

例:background-position: 100px 200px;

単位を忘れずに、つまり px と書く必要があります

特定のピクセルが負の数値を受け取ることができることに注意してください

ショートカット キー:

bpbackground-position: 0 0;

注意事項:

同じラベルで背景色と背景画像を同時に設定できます。色と画像が同時に存在する場合、画像は背景属性の略称

1を上書きします。背景属性の略語の形式

background: 背景色、背景画像のタイリング方法、関連付け方法、配置方法;

ショートカット キー:

bg+background: #fff url() 0 0 no-repeat;

2. 注:

background属性は任意の属性を省略可能

3. 背景関連付け方法とは？

デフォルトでは、スクロールバーのスクロールに合わせて背景画像もスクロールします。スクロールバーのスクロールに合わせて背景画像もスクロールしたくない場合は、背景画像とスクロールバーの関係を変更できます

。 4. 背景の関連付け方法を変更するにはどうすればよいですか?

CSS には

background-attachment

という属性があります。この属性は、

形式

value:

scroll を変更するために特別に使用されます。 , スクロール バーのスクロールに合わせてスクロールします スクロール バーのスクロールに合わせてスクロールしない問題を修正しました

ショートカット キー:babackground-attachment:;

5. 背景画像と挿入画像の違い

1.

1.1

背景画像は単なる装飾でスペースを取りません(他のタグやコンテンツを書き込むことができます)

写真を挿入するとスペースが必要です(他のタグを書き込むことはできません) ))

1.2

背景画像には位置属性があるため、画像の位置を制御するのに非常に便利です画像の挿入には位置属性がないため、画像の位置を制御するのは不便です画像

1.3

画像を挿入するセマンティクスは、背景画像のセマンティクスよりも優れています。強力であるため、エンタープライズ開発で画像が検索エンジンによってインデックス付けされることを希望する場合は、挿入された画像を使用することをお勧めします

6。 CSS スプライト

1. CSS スプライトとは

CSS スプライトは画像合成テクノロジーの一種です

2. CSS スプライトの役割

は、リクエストの数を減らし、サーバーの処理負荷を軽減します

3. CSS スプライトを使用します

CSS スプライトは背景画像と背景の配置で使用する必要があります

.box1{
            width: 110px; //设置宽高
            height: 143px;
            background-position: -560px -216px; //设置xy
        }

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、PHP に関する他の関連記事に注目してください。中国語のサイトです！

推奨書籍:

iOS WebView で HTMLString をロードする方法

見落とされやすい HTML5 のヒント

以上がCSSの背景とスプライトの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。