CSSで背景画像を設定する方法

青灯夜游
リリース: 2021-11-09 14:17:28
オリジナル
72867 人が閲覧しました

CSS で背景画像を設定する方法: 1.background-image 属性、構文 "background-image:url(picture url);" を使用します; 2.background 属性、構文 "background" を使用します:url(画像の URL) URL);"。

CSSで背景画像を設定する方法

このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

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

background-image 属性は、要素の背景画像を設定するために使用されます。要素の背景は、パディングと境界線を含む要素の合計サイズです (マージンは含まれません)。デフォルトでは、背景画像は要素の左上隅に配置され、垂直方向と水平方向の両方に繰り返されます。

<!DOCTYPE html>
<html>
	<head>
		<style>
			div {
				width: 450px;
				height: 360px;
				background-image: url(img/1.jpg);
				background-size: 450px;/*设置图片大小*/
			}
		</style>
	</head>

	<body>
		<div></div>
	</body>
</html>
ログイン後にコピー

CSSで背景画像を設定する方法

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

  • background -color使用する背景色を指定します

  • background-position 背景画像の位置を指定します

  • background-size 背景画像のサイズを指定します

  • background-repeat 背景画像の繰り返し方法を指定します

  • background-origin 背景画像の配置範囲を指定します

  • background-clip 背景画像の描画領域を指定します

  • ##background-attachment 背景画像を固定するか、残りの部分と一緒にスクロールするかを設定しますページ

  • # 背景画像は使用する 1 つ以上の背景画像を指定します

  • #例:
div {
	width: 450px;
	height: 360px;
	background: url(img/2.jpg);
	background-size: 450px;/*设置图片大小*/
}
ログイン後にコピー

CSSで背景画像を設定する方法(学習ビデオ共有:

css ビデオ チュートリアル

)

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

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート