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