ruorbb自用|前端学习7——CSS的背景

1、背景颜色

background-color：颜色值；（默认值是transparent，透明色）

2、背景图片

 background-image: none   |   url(url);

默认是没有背景图片，url可以使用相对或绝对地址

3、背景平铺

            1.不平铺

            background-repeat: no-repeat;

            2.默认情况下，是平铺的

            background-repeat: repeat;

            3.沿着x轴平铺

            background-repeat: repeat-x;

            4.沿着y轴平铺

            background-repeat: repeat-y;

【页面元素即可以添加背景颜色也可以添加背景图片，只不过背景图片会压住背景颜色】

4、背景图片位置

background-position: x y;

   （1）background-position: 方位名词;

            background-position: right center;

           如果是方位名词  right center和center right 效果是等价的 ，如果只指定了一个方位名词，               另一个值省略，则第二个值默认居中对齐

 （2）background-position:精确位置（x,y）

           如果只指定一个数值，那该数值一定是x坐标，另一个默认垂直居中

 （2）background-position:混合单位

          background-position: 20px center;（第一个值是x坐标，第二个值是y坐标）

5、背景图像固定（背景附着）

background-attachment: scroll   |    fixed;

scroll 背景图片随着对象内容滚动（默认）

fixed 背景图片固定

6、背景复合写法（提倡使用）

不像font有特定顺序，背景没有特定书写顺序，一旦习惯约定顺序为：

背景图片、地址、平铺、滚动、位置

7、背景色半透明（CSS3新增属性，IE9+版本浏览器才支持）

盒子背景色半透明，盒子内容不受影响

background: rgba(0,0,0,0.3);最后一个参数是alpha透明度，取值范围在0~1之间，

                     【0.3也可写成.3】