• 淮海实业集团新时代传习中心揭牌 2019-02-12
  • 时时彩012路最聪明玩法:CSS图片替换技术

    CSS 2017-12-02 抢沙发 阅读: 944次

    云南十一选五开奖信息 www.xlc09.com 图片替换是一种很有效的SEO优化手段,主要有两大好处:1、网站权重可以更好传递;2、让网站用户体验更好。

    下面进入正文。

    1、经典飞行情报区

    <h3 id="header">

    <span>Revised Image Replacement</span>

    </h3>

    /* css */

    #header

    {

    width: 329px;

    height: 25px;

    background-image: url(sample-opaque.gif);

    }

    #header span

    {

    display: none;

    }

    2、单像素更换

    <h3 id="header">

    <img src="shim.gif" alt="Revised Image Replacement" />

    <span>Revised Image Replacement</span>

    </h3>

    /* css */

    #header {

    width: 329px;

    height: 25px;

    background-image: url(sample-opaque.gif);

    }

    #header span {

    display: none;

    }

    3、拉杜方法

    <h3 id="header">

    Revised Image Replacement

    </h3>

    /* css */

    #header

    {

    background: url(sample-opaque.gif) no-repeat top right;

    width: 2329px;

    height: 25px;

    margin: 0 0 0 -2000px;

    }

    4、莱希/ Langridge方法

    <h3 id="header">

    Revised Image Replacement

    </h3>

    /* css */

    #header {

    padding: 25px 0 0 0;

    overflow: hidden;

    background-image: url(sample-opaque.gif);

    background-repeat: no-repeat;

    height: 0px !important;

    height /**/:25px;

    }

    5、Phark方法

    <h3 id="header">

    Revised Image Replacement

    </h3>

    /* css */

    #header {

    text-indent: -100em;

    overflow: hidden;

    background: url(sample-opaque.gif);

    height: 25px;

    }

    6、Phark再访

    <h3 id="header">

    Revised Image Replacement

    </h3>

    /* css */

    #header {

    text-indent: -5000px;

    background: url(sample-opaque.gif);

    height: 25px;

    }

    7、德怀尔方法

    <h3 id="header">

    <span>Revised Image Replacement</span>

    </h3>

    /* css */

    #header {

    width: 329px;

    height: 25px;

    background-image: url(sample-opaque.gif);

    }

    #header span {

    display: block;

    width: 0;

    height: 0;

    overflow: hidden;

    }

    8、吉尔德/莱法

    <h3 id="header">

    <span></span>Revised Image Replacement

    </h3>

    /* css */

    #header {

    width: 329px;

    height: 25px;

    position: relative;

    }

    #header span {

    background: url(sample-opaque.gif) no-repeat;

    position: absolute;

    width: 100%;

    height: 100%;

    }

    9、林赛罗方法

    <h3 id="header">

    Revised Image Replacement

    </h3>

    /* css */

    #header {

    background: url(sample-opaque.gif) no-repeat;

    width: 329px;

    height: 25px;

    font-size: 1px;

    color: #xxxxxx;

    }

    10、Shea Enhancement

    <h3 id="header" title="Revised Image Replacement">

    <span></span>Revised Image Replacement

    </h3>

    /* css */

    #header {

    width: 329px;

    height: 25px;

    position: relative;

    }

    #header span {

    background: url(sample-opaque.gif) no-repeat;

    position: absolute;

    width: 100%;

    height: 100%;

    }

    ==================================================

    发表评论

    称呼:

    邮箱:

    内容:

    ==========================

    评论回复

  • 淮海实业集团新时代传习中心揭牌 2019-02-12