码迷,mamicode.com
首页 > 其他好文 > 详细

图片替换文字

时间:2014-10-09 01:11:37      阅读:209      评论:0      收藏:0      [点我收藏+]

标签:style   http   io   os   使用   ar   strong   sp   c   

提要:为什么要使用图片替换文字

      文字的表现力差,但是便于网页获取信息,这里说的图片替换文字,是指文字还是存在于dom树中,但是显示的时候用图片来显示。

 

会遇到得问题: css on/images off

      我的理解:当图片没有加载到,页面会什么都不显示

 

替换方法:

1.原始的方法:使用span元素,设置displaynone

  代码:

       <h3 id="header1">

<span>image replacement</span>

   </h3>

       /*css*/

       #header1{

width: 100%;

height: 100%;

background: url(2.png) no-repeat;

   }

   #header1 span{

 display: none;

   }

  注意:该方法必须要设置宽高,因为当设置了span元素为none时,h3就不包含元素了,因此不能设置背景。

        并且该方法没有解决image off/css on的问题。

  存在的问题:

      如果文字是一个链接文字,文字被替换后,链接也会消失。

      解决方法:在<a>标签中包含一个额外的span元素,设置他为none,并强制把a标签的display设为block,并定义a的宽高。

 

2.额外增加一个img元素

  代码:

      <h3 id="header2">

<img src="2.png"/>

<span>image replacement</span>

  </h3>

      /*css*/

      #header2 span{

display: none;

  }

   注意:该方法在页面中增加了多余的没有语义的元素

 

3.使用边缘定位(margin position)隐藏文本

  代码:

        <h3 id="header3">

image replacement

</h3>

        /*css*/

        #header3{

background: url(2.png) no-repeat top right;

width: 2100px;

margin: 0 0 0 -2000px;

    }

  注意:必须设置宽度,且宽度要大于负边距的绝对值。这样内容才不会被完全隐藏掉。

        该方法没有解决image off/css on的问题

 

4.使用padding结合overflowhidden

  代码:

        <h3 id="header4">

image replacement

</h3>

        /*css*/

        #header4{

overflow: hidden;

padding: 60px 0 0 0;

height: 0px !important;

height: 60px;/*兼容IE5*/

background: url(2.png) no-repeat;

    }

  注意:该方法没有解决image off/css on的问题

 

5.使用text-indent来隐藏文本

  代码:

        <h3 id="header5">

image replacement

</h3>

        /*css*/

        #header5{

/*overflow: hidden;*/

/*text-indent: -5000px;*/

text-indent: -100em;

background: url(2.png) no-repeat;

    }

  注意:可以设置text-indent为负的em也可以为负的px

        该方法没有解决image off/css on的问题

 

6.原始方法的变形:设置span元素的宽高为0

  代码:

       <h3 id="header6">

<span>image replacement</span>

</h3>

       /*css*/

       #header6{

background: url(2.png) no-repeat;

   }

   #header6 span{

display: block;

width: 0;

height: 0;

overflow: hidden;

   }

  注意:该方法必须要设置spanoverflowhidden

        该方法没有解决image off/css on的问题

 

7.使用content替换内容

  代码:

       <h3 id="header7">

image replacement

</h3>

       #header7{

 width: auto;

 height: auto;

 content: url(2.png);

    }

  注意:该方法替换后文字后,不能对图片进行重复或平铺,或是使用image sprite

 

8.将文字大小设为1px;且文字颜色设为和背景一样。

   

代码演示:http://benlai.sinaapp.com/code/image_replace_text.html

原文网址:http://www.mezzoblue.com/tests/revised-image-replacement/

 

图片替换文字

标签:style   http   io   os   使用   ar   strong   sp   c   

原文地址:http://www.cnblogs.com/xiaoxiaojing/p/4011962.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!