CSS中background系列属性介绍

在CSS中background充当着背景图的意义，（在CSS3中会有更多的相关属性），这边小编介绍一下background系列属性中不存在兼容性问题的一些属性。之后再学习了CSS3后会在写博客进行对该类的补充。

从语义上看就是添加背景颜色

方法一：直接以颜色英文来写例：background-color:red;

很明显这种表示方式不足以描述所有的颜色在实践中用得少一点。那么引申到

方法二：background-color:rgb(000,000,000)，rgb表示三原色，红、绿、蓝。括号内三位数由0~255，相应组合表示颜色rgb(0,0,0)代表黑色，rgb(255,255,255)代表白色。

由于16进制也是从0~255；所以更多时候用16进制表示，在遇到上色时图片编辑软件一般就能直接给你返还16进制数表示颜色所以只要知道该方法就行，没必要去纠结如何调色。至于进制小编这里就不介绍了，可以在网上了解一下。

该属性是往背景里插图片。

格式为background-image:url(图片地址);

如若盒子比图大，再不做任何操作情况下图片会类似于复制一样自动填充满整个盒子。

注：padding填充部分也会算进背景中。

该属性可以使背景图片不重复或按要求重复

background-repeat:no-repeat; //图片不重复

background-repeat:-x; //只在x轴上重复

y轴同理

该属性表示对图片在盒子中的定位

我们把盒子左上角看为坐标原点0,0像素然后以像素移动，也可以是负数在表示时。

在该属性中有一个叫做CSS精灵的一个东西感兴趣可以去看一下

以像素我们是给予精确的定位

同时我们也可以以英文来进行一个大概定位

描述左右的词： left、 center、right

描述上下的词： top 、center、bottom

两者结合就可以使得在盒子中定位

例：background-position: right bottom; 表示右下角

background-attachment:fixed; //会使得图片不随滚动条滚动而移动

可以用一条语句来表示上述所有属性，我们按照每一个属性的属性格式来写系统能判定到你需要的操作，但方便观看理解一般以小编介绍的顺序写。

例：

background:red url(1.jpg) no-repeat 100px 100px fixed;

等价于：

background-color:red;

background-image:url(1.jpg);

background-repeat:no-repeat;

background-position:100px 100px;

background-attachment:fixed;

这里小编先介绍这么多，在CSS3中会有更多的相关属性之后学习到了会在做介绍。