前端学习：CSS核心属性--背景属性

CSS核心属性–背景属性

1.背景颜色

属性：background-color
取值：

• 颜色单词 。
• 六位十六进制的颜色值 。
• rgba（red，green，blue，alpha）。
  red–红色
  green–绿色
  blue–蓝色
  alpha–透明度取值范围：0-1
  注意：取值是小数，一般保留一位小数即可，如0.1，0.2（前面的0可以省略）。
  0–透明
  1–不透明

2.背景图片

属性：background-image：url（图片的路径）
注意：主要你插入背景图片，默认会产生平铺的效果–产生平铺之后，背景颜色是看不到了不是代码被覆盖。

3.背景平铺属性-背景重复

属性：background-repeat
取值：
repeat–默认值重复平铺的
no-repeat–取消平铺，不重复（应用最多的情况）
repeat-x --水平平铺
repeat-y --垂直平铺

4.背景图片的位置

只要插入背景图片之后，默认会产生平铺效果，取消平铺之后图片是不会在左上角显示的，有必要的话需要调整位置。
属性：background-position
取值：x y

• x–水平方向位置

+向右
-向左
关键词：left/right/center

• y–垂直方向位置

+向下
-向上
关键字：top/bottom/center

注意：取值可以是数值单位，可以是方位词。

5.调整背景图片尺寸大小

属性：background-size
取值：x y
水平方向的大小。
垂直方向的大小。

注意：取值里面的关键词（一个关键词替换x，一个替换y）。

• cover–覆盖（应用高）

等比例放大图片，直到图片撑满整个盒子为止（会出现被裁减的情况）。

• contain–包含

等比例放大图片，只要有一个边缘撑满了，就结束了（容易出现留白的情况）。

6.背景图片的滚动和固定

当你页面有滚动条的时候，滚动滚动条背景图片会被带动一起上去的效果叫做滚动，相反，如果不出现滚动的情况的话，这种情况就叫做固定。
属性：background-attachment
取值：
scroll–滚动
fixed–固定
注意：只要你添加看背景的固定，背景图的参照物位置都是浏览器窗口的左上角，大小调整也是参照浏览器窗口。

7.背景的复合属性

即一个属性可以实现多种样式。
属性：background：color image repeat position/size attachment
注意：

• 后面可以跟一个值也可以跟多个值
• 多个值部分先后顺序
• 尺寸大小和位置一起使用的时候，必须使用/链接且必须给值，如果是不需要调整位置的情况下，也要给值0px 0px。
  如：20px 20px/200px 200px
  0px 0px/200px 200px
  /前面代表是位置。
  /后面代表是大小。