企业管理系统定制开发本篇文章我们将一起展开来看css的background背景属性。
一、结构
创建DIV
<div class="div1"> 1</div>- 1
- 2
- 3
样式
width: 100px;height: 200px;font-size: 50px;color: #fff;background-color: #008000;- 1
- 2
- 3
- 4
- 5
二、属性解析
1、background-color
顾名思义，企业管理系统定制开发企业管理系统定制开发这个属性是为盒子添加背景颜色，可以是rgb值，企业管理系统定制开发也可以是值，企业管理系统定制开发也可以是颜色英文单词
background-color: #008000 / #080 / green /rgb(0,0,0);- 1
2、background-image
这个属性是为盒子添加背景图片，注意：图片链接可以使用引号包括，也可以直接写图片链接地址，可以是外链，可以是相对路径，可以是绝对路径
background-image: url(https://t7.baidu.com/it/u=4162611394,4275913936&fm=193&f=GIF);- 1
3、background-repeat
属性设置是否及如何重复背景图像。默认repeat，背景图像在水平和垂直方向上重复。
JS设置方式：object.style.backgroundRepeat="repeat-y"
| 值 | 说明 |
|---|---|
| repeat | 默认。背景图像将在垂直方向和水平方向重复。 |
| repeat-x | 背景图像将在水平方向重复。 |
| repeat-y | 背景图像将在垂直方向重复。 |
| no-repeat | 背景图像将仅显示一次。 |
| inherit | 规定应该从父元素继承 background-repeat 属性的设置。 |
4、background-position
属性设置背景图像的起始位置。这个属性设置背景原图像（由 background-image 定义）的位置，背景图像如果要重复，将从这一点开始。
JS设置方式：object.style.backgroundPosition="center"
| 值 | 说明 |
|---|---|
| top left ； top center；top right；center left；center center；center right；bottom left；bottom center；bottom right | 如果您仅规定了一个关键词，那么第个值将是"center"，默认值：0% 0%。 |
| x% y% | 第一个值是水平位置，第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果您仅规定了一个值，另一个值将是 50%。 |
| xpos ypos | 第一个值是水平位置，第二个值是垂直位置。左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。如果您仅规定了一个值，另一个值将是50%。您可以混合使用 % 和 position 值。 |
5、background-size
规定背景图像的尺寸：
div{ background:url(XXX); background-size:80px 60px; background-repeat:no-repeat;}- 1
- 2
- 3
- 4
- 5
| 值 | 说明 |
|---|---|
| x,y | 第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 “auto”。 |
| a%, b% | 父元素的百分比来设置背景图像的宽度和高度 ,第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 “auto”。 |
| cover | 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。注意：背景图像的某些部分也许无法显示在背景定位区域中 |
| contain | 把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。 |
6、background-clip
规定背景的绘制区域：
background-clip: border-box|padding-box|content-box;- 1
| 值 | 说明 |
|---|---|
| border-box | 默认值，背景被裁剪到边框盒 ，背景会出现在border边框的下边 |
| padding-box | 背景被裁剪到内边距框。border边框不加背景 |
| content-box | 背景被裁剪到内容框， 只在内容区添加背景 |
7、background-origin
相对于内容框来定位背景图像，即：背景图片的偏移量计算的原点
| 值 | 说明 |
|---|---|
| border-box | 背景图像相对于边框盒来定位 |
| padding-box | 背景图像相对于内边距框来定位。 |
| content-box | 背景图像相对于内容框来定位。 |
8、background-attachment
背景图片是否跟随元素移动
| 值 | 描述 |
|---|---|
| scroll | 默认值，背景图片会跟随元素移动 |
| fixed | 背景会固定在页面中，不会随元素移动 |
9、background
这一个属性可以同时设置上述所有属性，并且没有先后顺序
注意：
1、background-size 必须写在background-position的后边，并且使用/隔开
2、background-origin 必须写在background-clip的前边
| 值 | 描述 | css版本 |
|---|---|---|
| background-color | 规定要使用的背景颜色。 | 1 |
| background-position | 规定背景图像的位置。 | 1 |
| background-size | 规定背景图片的尺寸。 | 3 |
| background-repeat | 规定如何重复背景图像。 | 1 |
| background-origin | 规定背景图片的定位区域。 | 3 |
| background-clip | 规定背景的绘制区域。 | 3 |
| background-attachment | 规定背景图像是否固定或者随着页面的其余部分滚动。 | 1 |
| background-image | 规定要使用的背景图像。 | 1 |