图像替换

　　替换1

　　优点：屏幕阅读器可正常访问；没有多余的<span>  

　　缺点：没有解决浏览器禁用图像后空白页面的可访问性问题

<h1 class="header">come I here!</h1>

.header{
    padding:25px 0 0 0;
    overflow:hidden;
    background-image:url(here.gif);
    background-repeat:no-repeat;
    height:0px !important;
    height /**/:25px;
    }

　　替换2

　　优点：屏幕阅读器可正常访问；没有多余的<span>；代码简洁。 

　　缺点：没有解决浏览器禁用图像后空白页面的可访问性问题。

<h1 class="header">hello!</h1>

.header{
    text-indent:-5000px;
    background:url(hello.gif) no-repeat;
    height:26px;
    }

　　替换3

　　优点：屏幕阅读器可正常访问；解决浏览器禁用图像后空白页面的可访问性问题。

　　缺点：无法使用透明图像；CSS代码较冗长。

<h1 class="replace" id="myh1">Do you hava this in a size M?<span></span></h1>

.replace{
    position:relactive;
    margin:0px;
    padding:0px;
    overflow:hidden;
    }
.replace span{
    display:block;
    position:absolute;
    top:0px;
    left:0px;
    z-index:1;        
    }
#myh1,#myh1 span{
    height:25px;
    width:300px;
    background-image:url(size.gif);
    }

用最少的图像带来最大限度的视觉冲击

图像使用技巧

　　1.图像的大小和尺寸

　　2.图像数量

　　　　尽可能地使用文本样式替代图像。

　　　　只保留图像中为实现预期效果所必需的部分。

　　　　使用细条图像填充背景。1px

　　　　尽可能的重复使用图像。

　　　　合理地选用图像或颜色。

　　3.图像的分层

用圆角图像打破方框的束缚

　　实现曲线效果

　　　　1.简单曲线：单一北京图像实现。

　　　　2.在多个元素上应用背景。

　　　　3.修饰内容区域的边角。

　　　　4.自定义列表小木的指示符号。

在二维平面中表现三维的意境

　　创造环境

　　　　1.理解细节   仔细观察细节

　　　　2.表现真实感

　　　　　　要特别注意图形边缘的效果。

　　　　　　注意形状

　　　　　　图像的材质能够为物体带来真实感。

　　　　　　深度的确可以表现出额外维度的感觉，即使是在二维环境中也是如此。x 水平，y 垂直， z 第三个维度 深度 通过边缘的光影体现出来。

　　　　　　重力的模拟同样重要。

　　　　体积感

　　　　　　封闭区域是由颜色和材质组成的。

　　　　　　物体的体积是由长度高组成的。

　　　　3.处理层次

　　　　　　层次之间的线条、空间和大小有区别。

　　　　　　层与层之间仍是一个整体，并以某种方式保持着联系。

　　　　　　层与层之间的孤独要自然。

　　　　　　作品中总是要包含焦点或重点。

　　　　　　作品绝对不能缺少重力感。人们都希望物体能够置于某个平面上。　　　　　　

图像