看书《DIV+CSS商业案例与网页布局开发精讲》_网页背景_随手笔记

1、网页背景基础知识

（1）背景颜色：

属性：background-color

属性值4种：transparent（将背景设为透明）、RGB分量、十六进制颜色值、颜色英文关键词

（2）背景图片：

属性：background-image

属性值：url( )

注：(1) 尽量将图片的文件名以及后缀设置为小写字母，因为在一些环境中，大写字母表示的图片将不能显示。

另外，由于在某些环境中背景图片无法显示，所以在制作背景图片时，尽量指定背景颜色。

(2) 常用背景图片格式：jpg、png、gif。

gif优点：可以把背景图片设置为透明，

且在制作背景图片时使用一个像素宽度的图片重复时不会产生类似于.jpg压缩时所产生的色差

（3）使用CSS控制背景图片的重复

属性：background-repeat

属性值：

repeat 在水平和垂直方向上均重复（默认值）

repeat-x  只在水平方向上重复

repeat-y 只在垂直方向上重复

no-repeat 不重复

注：

制作背景图片时，如果遇到需要重复出现背景的情况，应该尽量将图片保存为.gif格式。

因为.jpg格式的图片在压缩时会产生色差，使得重复时产生色差带，影响页面效果

（4）固定背景图片

属性：background-attachment

属性值：

scroll 背景图片和内容一块滚动显示（默认值）

fixed 背景图片不和内容一块滚动显示

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

属性：background-position

属性值：水平位置 垂直位置

属性值具体分为：

(1) 值为关键词 ：top、bottom、left、right、center（距顶部或左边50%的位置）

(2) 两个值均为单位数值：数字或百分比

[1]  如果是数字，是区域内从左上角开始到图片左上角的位置

      （就应用来说，数字定义的绝对位置不会随浏览器窗口的大小而变化，故推荐使用）

[2]  如果是百分比，就是结合浏览器窗口大小的比例位置进行显示

例如：{ background-position：30px 70%

    background-repeat：no-repeat }

表示：图片的左边距是30像素，顶部边距是当前窗口大小的70%，这说明垂直方向的值会随着浏览器窗口大小的变化而改变。

注：

(1) 当只指定一个值时，默认为水平位置，而垂直位置就是50%的位置

(2) 必须将background-repeat属性值设为no-repeat

(3) 背景图片的具体值可以设置为负数，具体应用中常用来精确调整整块图片

(4) 默认情况下，背景图片都是从左上角开始显示

二、设置多个背景

在同一个页面中设置多个背景色块，以符合设计的要求。

对于CSS本身而言，一个CSS标记只能显示一个背景属性，

所以需要在设置了body的背景属性之外，

定义多个不同CSS类，并在其中定义背景属性，

应用到页面<div>、<table>等HTML标记中，

以达到所预期的目的。

三、制作渐变背景的2种方法：

1、通过渐变背景图片

【1】在PS中，先把新建的文件填充好渐变，

【2】然后使用“单列选择”工具，选择1px宽、文件高的选区，

【3】选择“图像”—裁剪，将图片裁剪成1×height尺寸的图片

【4】选择“文件”—存储为Web所用格式，选gif格式，其他默认。

2、通过使用滤镜

CSS滤镜是微软公司为了增强浏览器功能而开发的一类功能的集合，它不符合CSS标准，也不属于插件，所以一般CSS滤镜只在IE浏览器下才会生效。

CSS滤镜语法：

Filter:filtername(parameters);

    说明1：

         Filter：是滤镜的标识符，代表此处将使用滤镜

        filtername：是滤镜的属性名

        parameters：是该滤镜属性的参数

    Gradient滤镜语法格式：

          Filter:progid:DXImageTransform.Microsoft.Gradient(enabled=bEnabled,gradientType=value,startColorStr=color,endColorStr=color)

    说明2：

    progid:DXImageTransform.Microsoft.Gradient：滤镜名称，通过这句话表明本处将使用Gradient滤镜

    enabled：设置或检索滤镜是否激活。可设置为true或false，默认值为滤镜激活，可设置为false禁止滤镜

    gradientType：设置渐变方向，可设置为0或1.默认值为0，意思为垂直渐变

    startColorStr：设置开始颜色，可采用RGB值进行设置

    endColorStr：设置结束颜色，可采用RGB值进行设置

   注意：

   当滤镜设置的是整体页面背景，当页面无限制向下拉伸时，滤镜会根据页面的高度自动调整渐变色，以使之符合过渡效果；

           而图片则不具备这个属性。所以，当使用IE浏览器时，滤镜往往能起到事半功倍的作用。