在CSS中background充当着背景图的意义,(在CSS3中会有更多的相关属性),这边小编介绍一下background系列属性中不存在兼容性问题的一些属性。之后再学习了CSS3后会在写博客进行对该类的补充。
1.background-color
从语义上看就是添加背景颜色
方法一:直接以颜色英文来写 例: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进制数表示颜色所以只要知道该方法就行,没必要去纠结如何调色。至于进制小编这里就不介绍了,可以在网上了解一下。
2.background-image
该属性是往背景里插图片。
格式为background-image:url(图片地址);
如若盒子比图大,再不做任何操作情况下图片会类似于复制一样自动填充满整个盒子。
注:padding填充部分也会算进背景中。
3.background-repeat
该属性可以使背景图片不重复或按要求重复
background-repeat:no-repeat; //图片不重复
background-repeat:-x; //只在x轴上重复
y轴同理
4.background-position
该属性表示对图片在盒子中的定位
我们把盒子左上角看为坐标原点0,0像素然后以像素移动,也可以是负数在表示时。
在该属性中有一个叫做CSS精灵的一个东西感兴趣可以去看一下
以像素我们是给予精确的定位
同时我们也可以以英文来进行一个大概定位
描述左右的词: left、 center、right
描述上下的词: top 、center、bottom
两者结合就可以使得在盒子中定位
例:background-position: right bottom; 表示右下角
5.background-attachment
background-attachment:fixed; //会使得图片不随滚动条滚动而移动
6.background综合属性
可以用一条语句来表示上述所有属性,我们按照每一个属性的属性格式来写系统能判定到你需要的操作,但方便观看理解一般以小编介绍的顺序写。
例:
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中会有更多的相关属性之后学习到了会在做介绍。