CSS 背景 背景 example_html/css_WEB-ITnose

css 背景 背景は、HTML タグ要素の背景色、背景画像、その他の背景属性を設定するために使用されます。この記事では、プログラマー向けに CSS 背景の使用方法と基本的な使用例を紹介します。必要なプログラマはそれを参照できます。

1. CSS 背景の背景構文

CSS 背景の基礎知識

ここでの CSS 背景とは、CSS を介してさまざまな背景スタイルを設定するなど、CSS を介してオブジェクトに背景属性を設定することを指します。

背景構文:

background: background-color || background-image || background-repeat || background-attachment || background-position

CSS の背景単語:

background CSS 手動 query-background
background-color オブジェクトの背景色として色を設定します
background-image 画像を背景画像として設定します
background-repeat 背景タイルの繰り返し方向を設定します。
background-attachment 背景画像がオブジェクトのコンテンツとともにスクロールするか固定されるかを設定または取得します。
background-position オブジェクトの背景画像の位置を設定または取得します。

背景スタイルの値は複合属性値の組み合わせです。つまり、背景単語の値は複数の属性値にリンクでき、値はそれらの間にスペースを入れてリンクできます。
例:

background:#000 url(图片地址) no-repeat left top

CSS 背景 背景関数:

1. 単色の背景を設定します。背景の背景は、オブジェクトの単色の背景色を設定できます。
2. 画像を背景として設定します。背景が写真の場合は、その写真を横方向に繰り返し並べたり、オブジェクトの任意の位置に写真を背景として固定したりすることができます。

Web ページの背景スタイルを設定します

HTML 元の背景と CSS 背景の比較
Html は、対応する効果のテーブルの背景設定を参照します

Html 背景単語:

Bgcolor 対応する背景色を設定しますCSS の背景色に設定します。テーブルの背景色を設定している場合は、 bgcolor="color value " を使用してオブジェクトの背景色を設定できます。
CSS 背景色の場合は、background-color: color value; または background: color value を使用してオブジェクトの背景色を設定できます。

3. CSS 画像の背景

CSS は、background または background-image を使用して画像アドレスを直接参照し、画像をオブジェクトの背景として設定できます。

background-color:#FFF

ロゴ画像を背景として設定します

または

background:url(http://www.manongjc.com/logo.gif);

は同じ効果があります。この方法で画像を背景として設定する場合の欠点は、画像が上下左右に繰り返されることです。

background-attachment の使用分析:

background-attachment:fixed; 背景を修正

background-attachment:scroll; CSS の背景画像がオブジェクトのコンテンツとともにスクロール

写真の背景の背景構文:

background-image:url(http://www.manongjc.com/logo.gif);

background-image: URL (http://www.manongjc.com/logo.gif)

オブジェクトの背景を画像に設定 http://www.manongjc.com/logo.gif

画像を背景として使用する場合、繰り返しタイル化する必要があります。舗装の方向などには、background-position と background-repeat を一緒に使用する必要があります

background-image :url (url)

オブジェクト div はここで定義されており、背景画像は http://www.manongjc です。 .com/logo.gif、背景画像は繰り返されず、div オブジェクトの左への距離は 5px、上への距離は 6px に配置されます

4. 背景の中央揃え

CSS 背景左右センタリングと上下センタリングに分かれます。

背景画像を上下の中央に配置するには、上部と下部の高さを計算し、設定を均等に分割します。たとえば、上部と下部の高さの間の距離が 500 ピクセルの場合、上部に何 PX を設定するかを設定します。画像は画像の中心を上下にすることができます。

5. 複合背景スタイルの省略形

使用する場合は、コードの最適化と簡素化を考慮する必要があります 最適化できる省略コードは次のとおりです

1. 背景を単一色にのみ設定する場合

div{background-image :url (http://www.manongjc.com/logo.gif);background-repeat : no-repeat;background-position : 5px 6px } 

私たちの略称は

background-color:#FFF

2. 画像を背景の略語として設定します

background:#FFF

私たちの略称は:

background-image :url (http://www.manongjc.com/logo.gif);background-repeat : no-repeat;background-position : 5px 6px 

6. CSSの概要背景

写真を背景として使用することがよくありますウェブページのレイアウトで、皆さんがその知識を実際に習得できることを願っています。一般に、オブジェクトの画像を背景属性インスタンスとして設定します。 #666 url (画像アドレス) no-repeat center top; (説明: 最初に背景色を設定し、次に画像を背景として設定し、次に画像を繰り返すかどうかを設定します。オブジェクトの位置で画像を追跡します。 前の背景の色は設定する必要はありません。画像を繰り返し表示するかどうかを設定する必要はありません。画像の位置を設定します)

1、设置图片作为背景如果图片设置图片在X坐标方向重复，如果再设置图片在对象位置的左或右位置时将无效，可设置在对象上或下位置开始显示。

2、设置图片作为背景如果图片设置图片在Y坐标方向重复，如果再设置图片在对象位置的上或下位置时将无效，可设置图片在对象左或右位置开始显示。

3、如果设置背景完全重复显示，那设置图片在对象上下左右位置开始显示将无线。

网页布局时候我们常常对网页背景设置颜色、背景设置图片，达到我们需要的美观效果，我们实践制作写css background背景尽量从简，图片引入时候注意路径正确，如需定位对象背景。

经典背景复合属性表达式：

.manongjc{background:#FFF url (http://www.manongjc.com/logo.gif) no-repeat 5px 6px} 

这里既设置背景颜色，背景图片引入，背景图片定位、图片作为背景是否重复的样式。

 

相关阅读：

CSS 教程

CSS3 教程

CSS 参考手册

CSS background

CSS background-attachment

CSS background-clip

CSS background-color

CSS background-image

CSS background-origin

CSS background-position

CSS background-repeat

CSS background-size