颜色color

用颜色作为背景。

<div id="app"></div>


* {
	margin: 0;
	padding: 0;
}
#app {
	width: 400px;
	height: 300px;
	background-color: red;
}

在这里插入图片描述

图片image

默认会显示不全

background-image: url(./a1.jpg);

在这里插入图片描述

这就全了

background-size: 400px 300px;

在这里插入图片描述
如果小于画布。会重复。

在这里插入图片描述

取值有很多。

在这里插入图片描述
X方向。

在这里插入图片描述
Y方向。

在这里插入图片描述
都（默认）

在这里插入图片描述
不重复。

在这里插入图片描述
round：缩放，以强行凑整。

在这里插入图片描述
space：不缩放，中间留空。

在这里插入图片描述

取值有三个。
在这里插入图片描述
fixed。相对屏幕不动。超过元素范围会隐藏。

在这里插入图片描述
scroll。相对元素不动。（默认）

在这里插入图片描述

local。相对内容不动。

在这里插入图片描述

图片从哪里开始显示。

background-position: 100px 100px;

在这里插入图片描述
还有几个对齐的值。

在这里插入图片描述

这是与盒子相关的。
边框范围。
内填充范围。
内容范围。

在这里插入图片描述
边框范围。

在这里插入图片描述
内填充范围。（默认）

在这里插入图片描述

内容范围。

在这里插入图片描述

位置决定哪里开始画，
裁剪决定哪里开始有显示。
在这里插入图片描述
border：默认。会从border开始画。

在这里插入图片描述
padding。边框的位置白花花。

在这里插入图片描述

content。只在content范围。

在这里插入图片描述