CSSスタイルで背景画像を挿入する方法-CSSチュートリアル-php.cn

CSSスタイルで背景画像を挿入する方法

青灯夜游

リリース： 2020-12-18 11:10:56

オリジナル

21366 人が閲覧しました

CSS では、background-image または background 属性を使用して背景画像を挿入できます。基本的な構文形式は「background-image/background:url('URL')」です。パラメータ URL が使用されます。背景画像のパスを指定します。

CSSスタイルで背景画像を挿入する方法

このチュートリアルの動作環境: Windows 7 システム、HTML5 CSS3 バージョン、この方法はすべてのブランドのコンピューターに適しています。

推奨: 「css ビデオチュートリアル」

css では、background-image または background 属性を使用して背景画像を挿入できます。

background-image プロパティ

background-image プロパティは、要素の背景画像を設定します。要素の背景は、パディングと境界線を含む要素の合計サイズです (マージンは含まれません)。

構文:

background-image:url(&#39;URL&#39;));

ログイン後にコピー

url('URL') 画像 URL

デフォルトでは、background-image は次の場所に配置されます。要素の左上隅を選択し、垂直方向と水平方向に繰り返します。

ヒント: 背景画像が利用できない場合に背景リボンを代わりに使用できるように、利用可能な背景色を設定してください。

background 属性

background 属性は、背景を具体的に設定するプロパティで、背景色や背景画像を設定できます。

background 属性は、1 つのステートメントですべての背景属性を設定できる短縮属性です。

設定できるプロパティは次のとおりです。

background-color: 使用する背景色を指定します。
background-position: 背景画像の位置を指定します。
background-size: 背景画像のサイズを指定します。
background-repeat: 背景画像を繰り返す方法を指定します。
background-origin: 背景画像の配置領域を指定します。
background-clip: 背景の描画領域を指定します。
background-attachment: 背景画像を固定するか、ページの残りの部分と一緒にスクロールするかを指定します。
background-image: 使用する背景画像を指定します。

例:

background:url(bgimg.gif) no-repeat 5px 5px;

ログイン後にコピー

以下で説明:

CSSスタイルで背景画像を挿入する方法

背景画像の例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>背景图片设置</title>
		<style>
			.demo1{
				width: 400px;
				height: 200px;
				background-color: #fff;
				background-image: url(bg.jpg);
				background-repeat: no-repeat;
				background-size: cover;
			}
			.demo2{
				width: 400px;
				height: 200px;
				background:#fff url(bg.jpg) no-repeat;
				background-size: cover;
			}
		</style>
	</head>
	<body>
		<div class="demo1"></div><br />
		<div class="demo2"></div>
	</body>
</html>

ログイン後にコピー

CSSスタイルで背景画像を挿入する方法