DIV+CSS商业案例与网页布局精讲读书笔记（4）

制作背景

背景分为颜色背景和图片背景，分别对应的CSS属性是background-color和background-image

 

1.颜色背景

（1） 颜色背景属性的语法：

background-color: RGB颜色分量、十六进制颜色值、颜色英文关键值。

例如：

background-color: rgb(255,0,255);;

background-color: #000000

background-color:red;

其中颜色英文关键值有一个特殊：背景透明 (transparent).

 

（2） 颜色做背景时是忽略padding属性的。

 

2 图片背景

（1） 图片背景属性的语法：

background-image:url()  (注意：尽量将图片的文件名以及后缀设置为小写字母，因为在一些环境中大写字母表示的图片不能显示；另外，由于在某些环境中背景图片无法显示，所以在制作背景图片时，尽量指定背景颜色)

 

（2） 背景图片的重复

background-repeat: 属性值

属性值：repeat 在水平和垂直方向重复平铺（默认值）

               repeat-x在水平方向重复平铺

              repeat-y在垂直方向重复平铺

             no-repeat:不平铺

（本人在实际运用时碰到这样的问题，现在的CSS背景方面的无法解决：就是可否限制平铺的次数以及平铺时图片之间的间距。）

 

（3） 固定背景图片

当页面滚动时是否限制背景图片跟着滚动。

background-attachment: scroll(默认)/fixed

 

（4） 设置背景图片的显示位置

当背景图片小于显示指定的显示范围时，就可以设置背景图片在指定范围的显示位置

background-position: 属性值

其属性值有两种， 一是关键词：top,bottom,left,right, 如background-position:  right  bottom;

二是具体的单位数值， 如 background-position: 30px 70%;

 

(5) 渐变背景（背景图片色调的渐变产生视觉上的清新、通透效果）

图片本身是色调渐变

采用滤镜使图片渐变（限于IE浏览器）

语法 Filter:filename(parameters);  （滤镜标识符：Filter, 滤镜属性名：fileName, 该滤镜的属性参数parameters）

具体的滤镜使用查阅CSS。