CSS背景学习

CSS的背景

通过css的背景属性可以为页面元素添加各种样式。背景属性可以设置背景颜色、背景平铺、背景图片位置、背景图片固定等。

1、背景颜色 

    background-color 设置元素的背景颜色。
    background-color：颜色/transparent
    说明：transparent是全透明
                颜色值（颜色名/RGB/十六进制）
                背景区包括内容、内边距（padding）和边框（border）、不包含外边距（margin）

2、背景图片 

    background-image 设置元素的背景图片。
    background-image：url(图片地址)/none
    说明：url地址可以是相对地址也可以是绝对地址
               元素的背景占据了元素的全部尺寸，包括内边距和边框，但不包括外边距
               默认地，背景图像位于元素的左上角，并在水平和垂直方向上重复。
               当即设置了背景图片又设置了背景颜色时，背景图片会覆盖背景颜色

3、背景位置 

  background-position 设置背景图片的起始位置

背景图片的定位方法有3种：
1）关键字：background-position: top left;
2）像素：background-position: 0px 0px;
3）百分比：background-position: 0% 0%;

4、背景图像固定 

   background-attachment 背景图像是否固定或者随着页面的其余部分滚动
   background-attachment：scroll/fixed 
   scroll： 默认值，随着图片的滚动而滚动
   fixed：当页面的其余部分滚动时，背景图片不会移动

5、背景平铺

background-repeat 设置背景图像是否重复及如何重复
background-repeat：

repeat/no-repeat/repeat-x/repeat-y 分别是重复、不重复、水平重复、垂直重复

6、背景简写

background 简写属性，作用是将背景属性设置在一个声明中。
background：[background-color] [background-image] [background-repeat] [background-attachment] [background-position]
 说明：各值之间用空格分割，不分先后顺序

 7、背景颜色半透明

background：rgba （0,0,0,0.3），

最后一个参数为alpha透明度在0~1之间

0.3中习惯将0省略写 .3

背景颜色半透明是指盒子半透明，与内容无关。