CSSの背景を設定する方法

#CSS を使用すると、単色を背景として適用したり、背景画像を使用して非常に複雑な効果を作成したりできます。

CSS の機能は、この点で HTML よりもはるかに優れています。 (推奨学習: CSS 基本チュートリアル )

背景色

background-color 属性を使用して、要素の背景色を設定できます。 。このプロパティは、任意の正当な色の値を受け入れます。

このルールは、要素の背景を灰色に設定します:

p {background-color: gray;}

背景色が要素内のテキストから外側にはみ出さないようにしたい場合は、背景色を追加するだけです。パディング:

p {background-color: gray; padding: 20px;}

body から em や a などのインライン要素まで、すべての要素の背景色を設定できます。

background-color は継承できず、デフォルト値は透明です。トランスペアレントとは「透明な」という意味です。つまり、要素で背景色が指定されていない場合、背景は透明になり、その祖先要素の背景が表示されます。

背景画像

画像を背景に配置するには、background-image 属性を使用する必要があります。 Background-image プロパティのデフォルト値は none です。これは、背景に画像が配置されないことを意味します。

背景画像を設定する必要がある場合は、この属性の URL 値を設定する必要があります:

body {background-image: url(/i/eg_bg_04.gif);}

ほとんどの背景は body 要素に適用されますが、そうではありません。これに限ります。

次の例では、ドキュメントの残りの部分には背景を適用せずに、段落に背景を適用します。

p.flower {background-image: url(/i/eg_bg_03.gif);}

インライン要素に背景画像を設定することもできます。 次の例では、リンクの背景画像を設定します:

a.radio {background-image: url(/i/eg_bg_07.gif);}

理論的には、テキストエリアや選択などの置換要素の背景に画像を適用することも可能ですが、すべてのユーザーに適用できるわけではありません。エージェントは状況にうまく対処できます。

なお、background-imageは継承できないことを付け加えておきます。実際には、すべての背景プロパティが継承されるわけではありません。

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