您当前的位置:首页 > 网站运营 > SEO技术 > CSS图片替换技术

CSS图片替换技术

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

图片替换是一种很有效的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%;

}

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

发表评论

称呼:

邮箱:

内容:

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

评论回复