10种CSS图片替换技术

时间:12-10-23 栏目:SEO工具 作者:福清seo 评论:0 点击: 1,510 次

SEO博客网站Logo优化:最好的CSS图片替换法文章末尾埋下了伏笔,今天SEO博客就和大家一起来分享10种CSS图片替换技术,并且把此文章归类为SEO工具

图片替换是一种很有效的SEO优化手段,主要有两大好处:1、网站权重可以更好传递;2、让网站用户体验更好。

下面跟随SEO技术进入正文。

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%;

}

以上10种方法SEO技术博客多数转载自国外网络技术达人分享,希望SEO同仁们能有所启发!

声明:本文由(SEO博客)版权所有,禁止转载,文章链接:10种CSS图片替换技术

10种CSS图片替换技术:等您坐沙发呢!

发表评论

不解 砸舌 伤心 邪恶 惊呼 开心 害羞 大笑 汗颜 惊讶 头晕 酷毙 开心 发怒 别扭 白眼 眨眼 思考 扭头 中立 哭泣 尴尬

---=====【福清人在路上】=====---
福清SEO博客★福清人自己的博客
10年专注互联网★5年实战品牌营销
SEO顾问:www.fqseo.org
品牌营销:www.pinpaiyingxiao.org
新浪微博:weibo.com/61953117
微信号:61953117【私人】
公众号:福清人在路上(ID:fqrzls)

微博江湖