CSS-10.背景颜色和背景图片

背景颜色：

使用background-color: red;

---

背景图片：

使用background-image: url(" images/1.jpg");

---

背景图片的平铺方式：

使用background-repeat: repeat;

一般有四个取 值repeat（完全平铺xy），repeat-x（x方向平铺），repeat-y（y方向平铺）

和no-repeat（单一平铺）

应用场景：

一般用于降低网页大小。提升网页的访问的访问速度。

---

控制背景图片的位置：

使用background-position：水平方向 垂直方向；

取值：

1.具体的方位名词：水平方向：left center right

垂直方向：top center bottom

2.具体的像素：可以用具体px值来控制，例如background-position：200px 100px;

企业开发中的用途：

电脑显示器的分辨率是多种多样的，有大有小，为了让网页上的图片的重要内容居中显示，

图片设计师会制作一个尺寸很大的图片，重要内容居中显示，在我们前端开发中，使用

background-position：center top；就会让重要的图片居中显示，随着浏览器边框的

大小而改变，一直处在中间的状态。

---

背景的关联方式

是什么：

默认情况下背景图片会随着滚动条的滚动而滚动，如果不想让背景图片随着滚动条的滚动

而滚动，我们就可以修改背景图片和滚动条的关联方式

格式：background-attachment： fixed;

默认是scroll，随着滚动条的滚动而滚动

fixed,不会随着滚动条的滚动而滚动

---

背景属性缩写的格式

background:背景颜色 背景图片 平铺方式 关联方式 定位方式；例如：

background:red url(images/girl.jpg) no-repeat left bottom