CSS样式——背景图片

文章目录

• 颜色color
• 图片image
• 图片大小size
• 重复repeat
• 滚动行为attachment
• 坐标position
• 位置origin
• 裁剪clip

颜色color

用颜色作为背景。

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


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

图片image

默认会显示不全

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

图片大小size

这就全了

background-size: 400px 300px;

如果小于画布。会重复。

重复repeat

取值有很多。

X方向。

Y方向。

都（默认）

不重复。

round：缩放，以强行凑整。

space：不缩放，中间留空。

滚动行为attachment

取值有三个。

fixed。相对屏幕不动。超过元素范围会隐藏。

scroll。相对元素不动。（默认）

local。相对内容不动。

坐标position

图片从哪里开始显示。

background-position: 100px 100px;

还有几个对齐的值。

位置origin

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

边框范围。

内填充范围。（默认）

内容范围。

裁剪clip

位置决定哪里开始画，
裁剪决定哪里开始有显示。

border：默认。会从border开始画。

padding。边框的位置白花花。

content。只在content范围。