今天任务多，偷点懒少写一些

背景图优化

在网站页面中背景图片往往是必不可少的，它能帮助我们美化页面或者增加页面信息量。

图片格式

在网页中常用的图片格式有jpg gif以及png。

jpg格式

jgp格式也称为JPEG格式，以24位颜色存储单个位图。它能够以牺牲图像质量为代价对图片进行压缩。所以jpg格式的图片比较小，下载速度快，在页面中很受欢迎。

gif格式

gif在网页中一般以动态图或者图标类的形式出现。gif不能存储超过256颜色的图像，因此对色彩有要求的图片最好不适用gif，否则会对复杂色彩的图片造成失真。

png格式

png格式图片汲取了gif和jpg二者的优点。

存储形式丰富，兼有gif和jpg的色彩模式。
同时它能够将图片尽可能的压缩以利于网络传输，而且它的压缩是无损的。
png的图片显示速度很快，只需下载1/64的图像信息就可以显示低分辨率的预览图像。
png支持透明图像制作

背景属性

background-color

background-color用来设置其对应元素的背景色。比如设置body为黑色，body内部的div为白色

<style type="text/css">
    body{
        background-color: #000;
    }
    div{
        background-color: #FFF;
    }
</style>
<body>
    <div>
        body中的div
    </div>
</body>

background-image

background-image用来设置页面的背景图。其中url的路径可以是相对路径也可以是绝对路径

body{
    background-image: url(图片路径);   
}

background-repeat

用来设置背景图片在网页中以什么方式显示，包括平铺和不平铺两种方式
background-repeat有以下四种属性值

repeat 默认值背景图在纵轴和横轴上平铺
no-repeat 背景图不平铺
repeat-x 背景图仅在x轴上平铺
repeat-y 背景图仅在y轴上平铺

在一些网站中可能会使用平铺图作为自己页面的背景。比如

body{
   background-image: url(平铺图路径);
   background-repeat: repeat;
}

background-position

用来设置背景图在容器中的位置,比如将图片设置在body的右下角

body{
    background-image: url(图片路径);
    background-repeat: no-repeat;
    background-position: right bottom;
}

当然也可以使用数值来确定图片的位置，比如将图片设置在容器水平居中，距顶部200px的位置上。

body{
    background-image: url(图片路径);
    background-repeat: no-repeat;
    background-position: 50% 200px;
}

当background-position属性值只设置一个数值时，只应用于水平方向，而垂直方向以默认的50%为基准

当background-position属性值为百分比时，以图片中心为基准来计算位置，属性值为像素值时，以图片左上角为基准来计算位置

属性值也可以为负值

background-position属性常常用在CSS Sprite中，后面会介绍到

background属性的简写

上面提到的属性可以用一行来简写

body{
    background: #FFF url(images/demo.jpg) no-repeat right bottom;
}

设置body背景色为#FFF 背景图为demo 不平铺图片设置在右下角

CSS Sprite

CSS Sprite是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样在访问该页面时，载入的图片不会像以前那样一幅一幅的慢慢显示出来。使用这种方式，大大减少了该页面的http请求的次数，减轻服务器压力，同时缩短了悬停加载图片所需要的时间延迟，使效果更流畅。

CSS Sprite可以用在很多场合，大型网站将许多单独的图片组合起来从而便于维护和更新。图片之间通常会留出较大的空白，使图片不会影响图片的内容。但该方式大多使用于较固定的像素定位中，弹性差，守到定位等因素的制约，所以必须在可维护性和降低负载之间权衡利弊。
使用CSS Sprite过程中注意以下两点：

固定容器的宽度和高度
超出容器高度和宽度的部分需要隐藏

利用下面这张图写个小例子

每个ICO纵向以40px为基准，横向以400px为基准

HTML代码如下：

<div class="ico_list">
    <div class="content">
        <ul>
            <li class="note">笔记本</li>
            <li class="earth">地球</li>
            <li class="group">群组</li>
        </ul>
    </div>
</div>

然后就可以使用CSS Sprite方法了

<style type="text/css">
    .ico_list li {
        float:left;
        width:100px;
        height:20px; 
        overflow:hidden; 
        list-style:none; 
        text-indent:20px; 
        background:url(images/yahoo.gif) no-repeat 0 0;
    }
    .ico_list li.note {
        background-position:-400px -520px;
    }
    .ico_list li.earth {
        background-position:0 -200px;
    }
    .ico_list li.group {
        background-position:-400px -200px;
    }
</style>

效果如下图所示：

图片和文字的混排

在上个新闻小例子中，我们的侧边栏就对图片和文字混排做了相关处理，可以参考下。

今天偷懒就写到这里吧咕~~(╯﹏╰)b