ホームページ >ウェブフロントエンド >CSSチュートリアル >CSSを使用して背景色と画像を設定する方法
CSSを使用して背景色と画像を設定する方法
- 不言オリジナル
- 2018-12-08 16:33:227177ブラウズ
CSS を使用して背景色と画像を設定する方法: 1.background-color 属性を通じて背景色を設定します。2.background-image 属性を通じて背景画像を設定します。
この記事の動作環境: 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>実行結果
指定した色スカイブルーが背景色として設定されます。
使用します。背景画像を設定する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>実行中の効果を次の図に示します
画面サイズが背景画像より大きい場合は、デフォルトで自動的に背景画像を繰り返し表示します。この設定は、background-repeat 属性を使用して変更できます。
背景画像の表示開始位置は、初期設定では左上隅です。この設定は、background-position プロパティ
を使用して変更できます。以上がCSSを使用して背景色と画像を設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。