CSSを使用して背景色と画像を設定する方法-CSSチュートリアル-php.cn

CSSを使用して背景色と画像を設定する方法

不言

リリース： 2021-04-21 17:19:29

オリジナル

7178 人が閲覧しました

CSS を使用して背景色と画像を設定する方法: 1.background-color 属性を通じて背景色を設定します。2.background-image 属性を通じて背景画像を設定します。

CSSを使用して背景色と画像を設定する方法

この記事の動作環境: Windows7 システム、HTML5&&CSS3 バージョン、Dell G3 コンピューター。

CSS を使用して背景を設定するには、background 属性を使用する必要があります。background 属性を通じて、背景色と背景画像を設定できます。具体的な背景の設定方法を見てみましょう。 CSSで。

まず見てみましょうCSS の背景色設定

背景色を変更するには、background-color を使用する必要があります

background-color:value（颜色编码或者颜色名称）

ログイン後にコピー

In値の部分には#000000などのカラーコードや白などの色名を入力でき、設定した色が背景色となります。

background-color の初期値は透明です。この場合、親要素の背景色が適用されます。親要素に設定がない場合は白色になります。

CSS 画像の背景の設定

background-image プロパティを使用すると、サーバーにアップロードされた画像を背景として事前に設定できます。

background-image: url("图像的路径");

ログイン後にコピー

[URL]に、背景として使用する画像ファイルへのパスを入力します。 cssファイルと画像ファイルが同じディレクトリにある場合は、ファイル名だけで大丈夫です。

画像ファイルへのパスとしては、絶対パスと相対パスの両方を使用できます。

相対パスを入力するには、HTML ファイルへの相対パスではなく、外部スタイルシートへの相対パスを入力します。

それでは、具体的な例を見てみましょう

background-color を使用して背景色を設定します

コードは次のとおりです

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <style type="text/css">
    body{
      background-color: skyblue;
    }
  </style>
</head>
<body>
<p>CSSを使用して背景色と画像を設定する方法设置</p>
</body>
</html>

ログイン後にコピー

実行結果

指定した色スカイブルーが背景色として設定されます。

CSSを使用して背景色と画像を設定する方法

使用します。背景画像を設定するbackground-image

コードは次のとおりです

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <style type="text/css">
    body{
      background-image: url("img/t.jpg");
    }
  </style>
</head>
<body>
<p>CSSを使用して背景色と画像を設定する方法设置</p>
</body>
</html>

ログイン後にコピー

実行中の効果を次の図に示します

CSSを使用して背景色と画像を設定する方法