图片替换之隐藏文字

img-hide.css

/*
 *@ Name:       图片替换之隐藏文字[版本2]
 *@ Desc:       图片加载完之前会显示文字，有利于ARIA
 *@ Update:     2013-05-23
 *@ Doc:        http://www.iyunlu.com/view/css-xhtml/62.html
 *@ Example:    <a href="#" class="logo ir-warp"><span classs="ir">home page</span></a>
 *              .logo {
 *                  width: 100px;
 *                  height: 40px;
 *                  *background: url(../imgs/logo.jpg) no-repeat 0 0;
 *              }
 *              .logo .ir:before {
 *                  content: url(../imgs/logo.jpg);
 *              }
 */

.ir-warp {
    display: block;
    height: 100%; /* 注：父容器或当前容器需要固定宽、高 */
    overflow: hidden;

    /* 注：为提高组件的复用，请在同级选择器中为设置IE7/6设置背景图片 */
    /* *background:url(../imgs/logo.jpg) no-repeat 0 0; */
}
.ir-warp .ir {
    position: relative;
    z-index: -1;
}
.ir-warp .ir:before {
    display: inline-block; /* 可配合margin对图片进行定位 */

    /* 注：为提高组件的复用，请在同级选择器中为设置content */
    /* content: url(../imgs/logo.jpg); */
}