html基础之背景属性
今天突发奇想，复习一下css相关属性，并做一下笔记，因为是复习就不详细介绍，只是以例子简单介绍一下用法
| 属性 | 描述 |
|---|---|
| background | 在一个声明中设置所有的背景属性。 |
| background-attachment | 设置背景图像是否固定或者随着页面的其余部分滚动。 |
| background-color | 设置元素的背景颜色。 |
| background-image | 设置元素的背景图像。 |
| background-position | 设置背景图像的开始位置。 |
| background-repeat | 设置是否及如何重复背景图像。 |
| background-clip | 规定背景的绘制区域。 |
| background-origin | 规定背景图片的定位区域。 |
| background-size | 规定背景图片的尺寸。 |
background 简写属性在一个声明中设置所有的背景属性。
可以设置如下属性：
background-color
background-position
background-size
background-repeat
background-origin
background-clip
background-attachment
background-image
background-color 规定要使用的背景颜色。
div {background-color: yellow;}
h1 {background-color: #00ff00;}
p {background-color: rgb(255, 0, 255);}
书写颜色的几种方案
书写颜色的方法有几种，其中有比较常见的就是，直接书写的颜色（red）。 规定颜色值为十六进制值的背景颜色（比如 #ff0000）。规定颜色值为 rgb 代码的背景颜色（比如rgb(255,0,0)）。
当然了还有一个可以直接设置透明度的p {background-color: rgba(255, 0, 255,0.1);} ；即最后一个参数范围0-1，代表着透明度，其他的都容易理解，这里简单介绍一下十六进制颜色和rgb（）颜色，因为我不怎么会写
以#FFFFOO为例。从#后第1位开始每2位为一组,表示一个颜色的值（这是以十六进制来算的）
第1组为红色，第2组为绿色，第3组为蓝色
根据三基色的原理，红色与绿色混合为黄色，红色与蓝色混为紫色，绿色与蓝色混合为青色。 来看看这些基本色的颜色代码：
红色#FF0000，绿色#00ff00，蓝色为#0000ff，
黄色为#FFFFOO，紫色为#ff00ff,青色为#00ffff,白色#ffffff,黑色#000000（上面所提到的都是饱和色）
不知道你有没有这种经验，就是当所有的数值都相等的时候只有三种状态，黑白灰，数值越大，颜色越亮。于是当看到一些颜色代码的时候可以这么分析 举个例子啊：
比如颜色代码#ff9966,从这个代码中我们可以每个位上都减去6,于是便剩下#993300，然后可以分析出这种颜色偏向黄的红色，而且颜色较淡，有些灰，前面每位减去6了，具体颜色名称要具体分析
同样的，rgb（）颜色有着相同的特性；
RGB 分别代表 red green blue
000000 表示什么颜色都没有，黑色
FF0000 红色，00FF00 绿色，0000FF 蓝色
就从单色来看，这个值越大这个颜色越亮（越红），这个值越小则越暗（越黑）。以下是笔者用axure画的红色色谱。
background-position 规定背景图像的位置。
取值很简单，直接从别处截图
很明显，三种取值方式，不同的位置有不同的取值方法，如下所示
div {
background: url(img/demo.png) no-repeat;
background-position: center center;
/* background-position: 50px 50px; */
/* background-position: 50% 50%; */
background-size: 150px 100px;
width: 250px;
height: 200px;
border: 1px solid red;
}
不过在使用百分比時时需要注意，这里的移动点是图片的终点，简单的说就是background-position: 50% 50%;时，图片会居中，并不是和其他的一样，以x，y轴坐标为标准。所以在设置图片居中时候这是个比较好的方法，以上的三种测试都是如下图
background-size 规定背景图片的尺寸。
代码示例即使所对应的图片如下
/* background-size: 125px 200px; */
/* background-size: 125px ; */
/* background-size: 50% 100%; */
/* background-size: 50% ; */
/* 如果只设置一个值，则第二个值会被设置为 "auto"。 */
/* background-size: contain; */
/* 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。
背景图像的某些部分也许无法显示在背景定位区域中。 */
background-size: cover;
/* 把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。 */
background-repeat 规定如何重复背景图像。
没什么说的，即如何平铺背景，还有一些不常用的直接截图属性值
| 值 | 描述 |
|---|---|
| repeat | 默认。背景图像将在垂直方向和水平方向重复。 |
| repeat-x | 背景图像将在水平方向重复。 |
| repeat-y | 背景图像将在垂直方向重复。 |
| no-repeat | 背景图像将仅显示一次。 |
| inherit | 规定应该从父元素继承 background-repeat 属性的设置。 |
background-origin 规定背景图片的定位区域。
| 值 | 描述 |
|---|---|
| padding-box | 背景图像相对于内边距框来定位。 测试 |
| border-box | 背景图像相对于边框盒来定位。 测试 |
| content-box | 背景图像相对于内容框来定位。 |
background-clip 规定背景的绘制区域。
| 值 | 描述 |
|---|---|
| border-box | 背景被裁剪到边框盒。 |
| padding-box | 背景被裁剪到内边距框。 |
| content-box | 背景被裁剪到内容框。 |
background-attachment 规定背景图像是否固定或者随着页面的其余部分滚动。
| 值 | 描述 |
|---|---|
| scroll | 默认值。背景图像会随着页面其余部分的滚动而移动。 |
| fixed | 当页面的其余部分滚动时，背景图像不会移动。 |
| inherit | 规定应该从父元素继承 background-attachment 属性的设置。 |
background-image 规定要使用的背景图像。
详细内容 https://www.w3school.com.cn/cssref/pr_background.asp
