2021.4.6

今日学习内容：

	第一天	第二天	第三天	第四天	第五天
所花时间（小时）	4.5	6
代码量（行）	500	300
博客量（篇）	1	1
了解到的知识点	html的多场景应用练习	CSS背景图像、背景重复

CSS 背景图像

• CSS 背景
• CSS 背景重复

CSS 背景图像

background-image 属性指定用作元素背景的图像。

默认情况下，图像会重复，以覆盖整个元素。

实例

页面的背景图像可以像这样设置：

body {
  background-image: url("paper.gif");
}

实例

本例展示了文本和背景图像的错误组合。文字难以阅读：

body {
  background-image: url("bgdesert.jpg");
}

注意：使用背景图像时，请使用不会干扰文本的图像。

还可以为特定元素设置背景图像，例如 <p> 元素：

实例

p {
  background-image: url("paper.gif");
}

CSS background-repeat（背景重复）

默认情况下，background-image 属性在水平和垂直方向上都重复图像。

某些图像应只适合水平或垂直方向上重复，否则它们看起来会很奇怪，如下所示：

实例

body {
  background-image: url("gradient_bg.png");
}

如果上面的图像仅在水平方向重复 (background-repeat: repeat-x;)，则背景看起来会更好：

实例

body {
  background-image: url("gradient_bg.png");
  background-repeat: repeat-x;
}

提示：如需垂直重复图像，请设置 background-repeat: repeat-y;

CSS background-repeat: no-repeat

background-repeat 属性还可指定只显示一次背景图像：

实例

背景图像仅显示一次：

body {
  background-image: url("tree.png");
  background-repeat: no-repeat;
}

在上例中，背景图像与文本放置在同一位置。我们想要更改图像的位置，以免图像过多干扰文本。

CSS background-position

background-position 属性用于指定背景图像的位置。

实例

把背景图片放在右上角：

body {
  background-image: url("tree.png");
  background-repeat: no-repeat;
  background-position: right top;
}