css背景属性总结

1. 背景颜色

    1. background-color
    2. 默认值是transparent(透明)

2. 背景图片

1. 语法

   background-image: none | url(url);(不加引号)
   

2. 可以定义多个背景图片，多个背景图片定义会发生图片的重叠，

   background-image: url(/images/2.PNG),url("/images/4.jpg");
   

   但是可以通过backgound-的其他属性进行设置

   background-image: url(/images/2.PNG),url("/images/4.jpg");
   background-repeat: no-repeat,no-repeat;// 第一个设置作用于第一个图片
   background-position: top left,bottom right;
   

3. 背景裁切

设置元素的背景是否延申到边框、内边距下面。background-clip

属性值：

属性值	说明
border-box	背景延申至边框外沿（但是在边框下层），也即只有当border-style不是固实(solid)的时候方可显示效果
padding-box	背景延申至内边距外沿，不会绘制到边框处
content-box	背景被裁剪到内容区外沿

4. 背景重复

当背景图片小于容器的时候，默认会产生多个图片进行重复显示

1. 语法

   background-repeat: no-repeat;
   

2. 参数说明

   属性值	说明
   repeat	默认值，背景纵向和横向上重复平铺
   no-repeat	背景图像不平铺，不重复
   repeat-x	背景图像在横向上平铺
   repeat-y	背景图像在纵向上平铺
   space	背景图片对称均匀分布（重复均匀分布），相对于repeat不会显得那么乱

3. 注：可以同时添加背景颜色和背景图片，只不过背景颜色在背景图片下方显示

5. 背景图片位置

该位置相对于由background-origin定义的位置图层

background-origin规定了background-image属性的原点位置的背景相对区域。

属性值：

属性值	说明
border-box	背景图片的摆放以border区域为参考
padding-box	背景图片的摆放以padding区域为参考
content-box	背景图片的摆放以content区域为参考

1. 语法

   background-position: x y;
   

2. 参数x ，y 可以使用方位名词/精确单位

   1. 方位名词 left| center | top | right | bottom
      1. 如果两个值都是方位名词，则两个值前后顺序无关
      2. 如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐
   2. 参数是精确单位(px)
      1. 如果参数是精确坐标，那么第一个肯定是x坐标，第二个一定是y坐标
      2. 如果只指定一个数值，那该数值一定是x坐标，另一个默认垂直居中
   3. 参数是相对单位(%、em)
      1. 如果参数只有一个，则为相对于x边缘的值，另一个垂直居中
      2. 如果参数是两个，则一个相对于x边缘的值，另一个相对于y边缘的值
      3. 但是值得注意的是：如果背景图片的大小和容器一样，那设置的百分比值将会失效，因为“容器和图片的差”为0，图片永远填满容器，并且图片的相对位置和容器的相对位置永远重合。
   4. 参数是混合单位
      1. 如果指定的两个值是精确单位和方位名词混合使用，则第一个值是x坐标，第二个值是y坐标

3. 可以设定多个position

6. 背景图像固定（背景附着）

1. 语法

   background-attachment:scroll | fixed;
   

2. 设置背景图像是否固定/随着页面的其余部分滚动，后期可以制作视差滚动效果，以及图像水印效果

3. 参数

   1. scroll

      背景图片随对象内容滚动

   2. fixed

      背景图像固定

7. 背景尺寸

background-size为在元素原来比例尺寸的基础上再对其显示进行设置。

属性值

属性值	说明
contain	尽可能的缩放背景并保持图像的宽高比例（图像不会被压缩）
cover	尽可能大的缩放背景图像并保持图像的宽高比例（图像不会被压扁
auto	以背景图片的比例缩放背景图片。(可能部分看不到)（图像被压缩）

采用数值px em %（重新设置图片的宽高）

• 只指定一个值

  则另一个值默认为auto

• 指定两个值

  一个值表示width，另一个值表示为height

• 可以设置多个背景的尺寸

8. 背景复合写法

• background-size只能紧挨着background-position出现，以/分隔，例如：center/80%

• 如果只出现一次，则同时设定background-origin和background-clip，如果出现两次，第一个设定background-orgin

• background-color只能在background的最后一个属性上定义，因为整个元素只有一种背景颜色。

• 其他属性，则不讲究顺序

  background-attachment background-color background-position background-size background-image background-repeat

9. 盒子阴影

通过box-shadow进行设置，使用方式和text-shadow一样

10. 图像渐变

两种渐变类型都是属于gradient类型，是一种特别的image数据类型，因此两种属性只适用于image可使用的地方。

10.1 线性渐变 linear-gradient

线性渐变的颜色显示规则是按照线性规则进行应用，包括：颜色从上到下，从右到左，从左上到右下等。

线性渐变是由一个轴，也即渐变线来定义的。渐变线上的颜色通过自定义来产生，比如：linear-gradient(red,green)，此处由于没有指定颜色起始位置，也即没有指定red、green从哪开始绘制到哪停止绘制，因此默认各占渐变线的一半平滑过渡，那么真正要绘制的图形容器颜色如何通过渐变线来绘制呢？linear-gradient会构建一系列垂直于渐变线的着色线，每一条着色线的颜色取决于与之垂直相交的渐变线上的颜色。而图形容器则由这一系列的着色线组成。

linear_gradient

语法：

linear-gradient([  | to  ,]?  )
              \--------------------------------/ \---------------------/
            Definition of the gradient line  List of color stops

angle：用角度值指定渐变的方向（或角度）。有角度表示渐变线可以旋转，而渐变线旋转的基点在背景容器的中线点上。顺时针旋转角度为正，逆时针旋转角度为负。

角度使用的单位为deg角度单位，也即一个完整的圆是360deg

标准模式下的linear-gradient

标准模式下，旋转的初始位置为相对于背景容器重合时，穿过背景容器的中心点从下到上的方向（180deg）。也即默认位置如下：

linear_gradient-02

默认位置为180deg，xdeg则表示渲染的起始点从xdeg处开始

假设顺时针旋转45deg，也即linear-gradient(45deg,red,green);

此时渲染起始点为45deg处，也即左下方向渲染方向变成从左下到右上

linear_gradient-03.png

假设逆时针旋转``45deg，也即linear-gradient(-45deg,red,green)`：

此时渲染起始点为-45deg处，也即右下方向，渲染方向变成从右下到左上

linear_gradient_04.png

采用方位词的方式表示旋转角度

可选值有：top bottom left right

与to关键词搭配使用，表示渲染方向到xx处，也即指明了渲染终点，比如to top表示从bottom开始渲染，到top处结束。也即渲染方向为从下往上。对应角度为0deg

to left|to right | to top | to bottom 分别对应于转换角度360deg 90deg 0deg 180deg

也可以两两搭配，顺序不讲究

to left top : 从右下到左上

to right top: 从左下到右上

...等

颜色渐变。由至少两个color值组成，且每个color值跟随着一个可选的终点位置（可以是一个百分比值或者是沿着渐变轴的length）。css渐变的颜色渲染采取了与SVG相同的规则。

一般情况下如果只是多个颜色的组合过渡，没有指明每个颜色的渲染的终点位置，那么默认均分背景容器的位置。

比如：linear-gradient(red,green)没有指明red和green的到哪渲染结束，那么默认背景容器的1/3作为全部都是红色渲染，1/3用于红色到绿色的过渡渲染，1/3用于全部都是绿色渲染。

而以上方式则表现为平滑过渡，显示的效果会略有点生硬。所以一般可自定义每个颜色渲染的终点位置。

例如：

linear-gradient(red 30%, green 50%,blue 100%);

linear-gradient-05.png

表示按照渐变线指定的方向渲染，从上往下。从容器背景的0%开始渲染到30%处表现为红色（全红），其中红色到绿色的过渡的部分各取了红与绿渲染部分作为公共过渡部分，30%到50%处表现为绿色，50%到100%处表现为蓝色。其中0%以及最后一个颜色的100%可以省略，默认是到容器最后。

指明过渡的中间点，

linear-gradient(90deg,red, 0%,green);

之前过渡点都是默认取值，什么是过渡点呢？也即一个颜色转变到另一个颜色时的转变点。

以上代码表示，从0%处开始过渡，0%以前是红色位置，0%-100%为绿色位置，所以显示为：

[图片上传失败...(image-db1414-1618967718111)]

也可以采用length的方式指明，length是根据渐变线来指定的

linear-gradient(-45deg,red 0px,green 50px,yellow 150px,blue 200px);

liear-gradient-06.png

可以看到及时没有red颜色值，但是仍然存在过渡颜色。

注意：颜色终止列表中颜色的终止点应该是依次递增的。如果后面的颜色终止点小于前面颜色的终止点则后面的会被覆盖，从而创建一个硬转换。下面的变化是从红色到黄色在40%的位置(也即没有红色到黄色的过渡)，然后过渡从黄色到蓝色终止于65%的位置处。

background-image: linear-gradient(red 40%, yellow 30%, blue 65%);

渐变跨浏览器兼容模式

由于渐变是CSS3中的新规定，所以保不准那些有使用旧浏览器不兼容，为了兼容就得使用兼容前缀
其中有：

-moz-linear-gradient
-webkit-linear-gradient
-o-linear-gradient

-moz-前缀的规则用于兼容Fx 3.6 to Fx 15的火狐浏览器。 -webkit-前缀的规则用于兼容在Android 4.3以前版本、iOS 6.1以前版本、Safari 6。-o-前缀的规则用于兼容旧版本的opera浏览器。

标准模式和兼容模式的区别：

• 0deg基线的位置不同，标准模式的是指向背景容器的正北方，兼容模式的是指向背景容器的正东方。
• 关键字的使用方式不同，标准模式的需要加”to”关键字，兼容模式的不能加”to”（且top表示从上往下渲染）

10.2 重复线性渐变 repeating-linear-gradient

repeating-linear-gradient与linear-gradient语法一样，不同的是它在背景容器所设置的background-size大小范围内循环渐变，比如：

repeating-linear-gradient(-45deg,red 10px,blue 15px,yellow 20px);

表示循环生成red,blue,yellow颜色分布的渐变，他们之间的距离会循环累加

相当于：

 linear-gradient(-45deg,red 10px,blue 15px,yellow 20px,red 30px,blue 35px,yellow 40px,...);

repeating-linear-gradient_01.png

如果设置了background-size值，那么repeating-linear-gradient循环的是范围是在背景容器background-size所设置的大小范围内。如果没有设置background-size值，则循环的范围是整个背景容器。

应用：滚动条

div {
    width: 600px;
    height: 30px;
    margin: 200px auto;
    background: repeating-linear-gradient(90deg,red,15px,yellow 15px, 15px,green 25px);
}

以上采用了设置过渡点的形式使其显示更生硬，red到yellow过渡点为15px也即15px之前都是red，15px到yellow最后可绘制的范围15px为yellow，也即red到yellow这两个颜色的过渡把yellow遮盖了，yellow到green过渡为15px，也即15px之前绘制yellow，15px到25px绘制blue，同样yellow没有可绘制的，因此15px-25px全为green，使其显得就如red到green之间不存在过渡，直接是两个颜色拼接一样。

linear-gradinent-07.png

10.3 径向渐变 radial-gradient

和线性渐变一样，径向渐变也有自己的渐变线叫做渐变射线，原理差不多,都是先找一个渲染起始点开始渲染，然后到渲染结束点。而径向渐变渲染起始点在背景图像的中心位置处。

• 设置渐变

background: radial-gradient(red, blue, green);

• 设置渐变宽度与高度

  background: radial-gradient(100px 200px, red, blue, green);
  

• 左下渐变

  background: radial-gradient(at bottom left, red, blue);
  

• 左侧向中心渐变

  background: radial-gradient(at center left, red, blue);
  

• 底部向中心渐变

  background: radial-gradient(at 50% 100%, red, blue);
  

  其中50% 与 100%是相对于渐变射线而言的

radial-gradient——02.png

10.4 重复径向渐变 repeating-radial-gradient

与重复线性渐变一样。用法类似。