负边距以及越多方式,CSS学习笔记

CSS图像替换:文本缩进,负边距以及更加多格局

2016/07/04 · CSS ·
图像替换

原稿出处: Baljeet
Rathi   译文出处:众成翻译   

CSS中的图像替换有着广阔而为数众多的历史。方今,假设你还想那样做,有那多少个至今依然有效的图像置换技术。必须注意的是,其中有些实在可能迅猛(如若不是早已)
会被Google批判,所以要严峻选择。然则,你很难知晓怎么时候一个CMS或者项目会迫使你须求get
out图像替换kit!那里是过去的kit,在web完全完毕在此以前,那说不定是终极一份你需求的图像替换技术列表。

亚洲必赢官网 1

插画来自SitePoint/Natalia Balska

转自微信公众号——前端早读课
前言
看完那篇又get到除了缩进以外的11种图像替换的不二法门了,本文由众成翻译@伊一带来的享受。

英文原稿:A History of CSS Image
Replacement
译者:伊一
译文地址:http://t.cn/R5EETjh

1.简单链接样式

运用负的文书缩进 — Phark 方法

那是web开发人士在某些意况下使用的最广泛的技术。那里的想法是经过设置一个很大的负text-indent,让文本远离浏览器窗口:

CSS

.replace-indent { width: 264px; height: 106px; background:
url(“assets/logo.png”); text-indent: -9999px; }

1
2
3
4
5
6
.replace-indent {
  width: 264px;
  height: 106px;
  background: url("assets/logo.png");
  text-indent: -9999px;
}

此地有一个CodePen演示,体现了运用text-indent隐藏文本时标题的指南:

查看笔记 图像替换 –
缩进方法,作者 SitePoint
(@SitePoint),在CodePen。

行使那种方法,文本还能被显示器阅读器获取到。不过,当文本右对齐的时侯,这种措施就不行了。由于这一个text-indent,浏览器也亟需为大家的标题渲染一个分外大的盒子,那在有的很老旧的配备中或者会生出难题。

正文从那开首~

CSS中的图像替换有着广泛而三种的野史。近日,若是你还想那样做,有好多迄今如故有效的图像置换技术。必须小心的是,其中有的实际可能敏捷(如果不是早就)
会被Google批判,所以要严格采纳。可是,你很难了解怎样时候一个CMS或者项目会迫使你要求get
out图像替换kit!那里是病故的kit,在web完全落成此前,那说不定是终极一份你须求的图像替换技术列表。

对链接最简易的不二法门是应用锚类型采用器:

Scott Kellum 方法

与其设置一个很大的负text-indent,你可以设置它为100%。那种艺术下,浏览器不必要创制一个很大的盒子,品质会赢得升高。你不必要任何附加的符号就可以动用这么些艺术。你须求的CSS如下:

CSS

.replace-scott { width: 264px; height: 106px; background:
url(“assets/logo.png”); text-indent: 100%; white-space: nowrap;
overflow: hidden; }

1
2
3
4
5
6
7
8
.replace-scott {
  width: 264px;
  height: 106px;
  background: url("assets/logo.png");
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}

设置overflowhidden可以隐蔽文本,whitespace: nowrap
可以阻挡换行。那种措施下,阅读器如故可以读取文本。那里有一个那项技能的言传身教:

翻看笔记 图像替换 – Scott Kellum
方法,作者 SitePoint
(@SitePoint),在CodePen。

CSS中的图像替换有着广大而种种的野史。近年来,如果你还想那样做,有很多迄今仍旧有效的图像置换技术。必须注意的是,其中有的实际可能很快(如若不是一度)
会被谷歌(Google)批判,所以要小心谨慎运用。然则,你很难了然什么样时候一个CMS或者项目会迫使你须求get
out图像替换kit!这里是过去的kit,在web完全落到实处此前,那或许是终极一份你必要的图像替换技术列表。

亚洲必赢官网 2

a {color:red;}

应用边距 — Radu Darvas 方法

那项技术照旧是强制文本在浏览器窗口之外,不过是应用边距去做的。这些想法是利用一个很大的负的右边距,并且给标题一个周旋大的小幅。

CSS

.replace-margin { width: 2264px; height: 106px; background:
url(“assets/logo.png”) top right no-repeat; margin: 0 0 0 -2000px; }

1
2
3
4
5
6
.replace-margin {
  width: 2264px;
  height: 106px;
  background: url("assets/logo.png") top right no-repeat;
  margin: 0 0 0 -2000px;
}

和上一种情景相同,大家的logo被用作标题的一个背景图片。那里有一个示范,显示了那项技艺是如何起效果的,首先是未曾边距的,然后利用那几个边距:

查阅笔记 图像替换 – Margin
方法,作者 SitePoint
(@SitePoint),在CodePen。

设若直接滚动到右手,你最终会看出第四个题目的背景。实际上,你不用担心滚动条,因为那么些大的负边距补偿了涨幅(就如您在其次个标题中看到的)。记住,那种方法对于浏览器执行来说并不飞快,因为浏览器不得不画一个要命大的盒子。

选择负的公文缩进 — Phark 方法
这是web开发人员在好几情状下选取的最常见的技艺。那里的想法是通过安装一个很大的负text-indent,让文本远离浏览器窗口:

插图来自SitePoint/[Natalia Balska]()

锚的中间链接

动用内边距 — Langridge 方法

这一次大家运用padding-top
属性把文件推出我们的标题之外。这些特性的值会被设置成与logo的高相等。然则,仅仅那几个是不够的,我们还须要运用overflow: hidden来掩藏文本。

CSS

.replace-padding { width: 264px; height: 0; background:
url(“assets/logo.png”); padding: 106px 0 0 0; overflow: hidden; }

1
2
3
4
5
6
7
.replace-padding {
  width: 264px;
  height: 0;
  background: url("assets/logo.png");
  padding: 106px 0 0 0;
  overflow: hidden;
}

和事先的二种方式比较,这些特性可以展现出更好的性质。它也提供了和事先二种办法一致档次的可访问性。如下是这些技术的一个示范,首个标题没有填写背景,第一个有:

翻开笔记 图像替换 –
内边距方法,作者 SitePoint
(@SitePoint),在
CodePen。

亚洲必赢官网 3

行使负的文书缩进 — Phark 方法

那是web开发人士在少数情形下使用的最广泛的技能。那里的想法是经过设置一个很大的负text-indent,让文本远离浏览器窗口:

.replace-indent {
  width: 264px;
  height: 106px;
  background: url("assets/logo.png");
  text-indent: -9999px;
}

此间有一个CodePen演示,体现了拔取text-indent隐藏文本时标题的榜样:

查看笔记 图像替换 –
缩进方法,作者
SitePoint
(@SitePoint),在CodePen。

行使这种方法,文本如故可以被屏幕阅读器获取到。然则,当文本右对齐的时侯,那种措施就没用了。由于这些text-indent,浏览器也急需为大家的标题渲染一个要命大的盒子,那在有些很老旧的装备中或者会生出难题。

<p><a href=”#mainContent”>Skip to main
Content</a></p>

拔取小的font-size — Lindsay 方法

另一种隐身文本的艺术是让它变得不行小,并且将它的水彩设置成logo的背景。那种办法不会潜移默化可访问性,但是由于微小的书体和假装的水彩,你恐怕会遇上SEO困难。

CSS

.replace-font { width: 264px; height: 106px; background:
url(“assets/logo.png”); font-size: 1px; color: white; }

1
2
3
4
5
6
7
.replace-font {
  width: 264px;
  height: 106px;
  background: url("assets/logo.png");
  font-size: 1px;
  color: white;
}

那边有个该措施的演示,第三个图像尚未设置font-size,而是在其次个图像中起了效益:

翻看笔记 图像替换 – font-size
方法,作者 SitePoint
(@SitePoint),在
CodePen。

假定您的logo没有一个单纯的背景象来允许完美的长短不一,你照旧会蒙受困难。那种场地下,你可以把颜色设置成transparent

图片.png

Scott Kellum 方法

与其安装一个很大的负text-indent,你可以安装它为100%。这种方式下,浏览器不必要创制一个很大的盒子,品质会收获升高。你不须要此外附加的号子就足以采纳这么些方法。你必要的CSS如下:

.replace-scott {
  width: 264px;
  height: 106px;
  background: url("assets/logo.png");
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}

设置overflowhidden可以隐蔽文本,whitespace: nowrap可以阻碍换行。那种形式下,阅读器照旧可以读取文本。那里有一个那项技能的演示:

查看笔记 图像替换 – Scott Kellum
方法,作者
SitePoint
(@SitePoint),在CodePen。

….

运用 Display — Fahrner 图像置换

和其他艺术不一样,这些格局需求您增添额外的标志。那里的想法是把公文包裹进一个元素,并且安装它的display属性为none。那几个案例中的标记可以是:

XHTML

<h1 class=”replace-display”> <span>SitePoint</span>
</h1>

1
2
3
<h1 class="replace-display">
  <span>SitePoint</span>
</h1>

CSS可以是:

CSS

.replace-display { width: 264px; height: 106px; background:
url(“assets/logo.png”); } .replace-display span{ display: none; }

1
2
3
4
5
6
7
8
9
.replace-display {
  width: 264px;
  height: 106px;
  background: url("assets/logo.png");
}
 
.replace-display span{
  display: none;
}

那里有一个示范,将大家的元素的display设置成none:

查阅笔记 图像替换 – Display
方法,作者 SitePoint
(@SitePoint),在CodePen。

本条点子即便很不难完成,可是缺少可访问性。这是因为display设置成none负边距以及越多方式,CSS学习笔记。的要素会被屏幕阅读器忽略。当visibility设置成hidden时,同样的题材也会发出,所以你也不能用那多少个。你可以设置opacity0。那样将会隐藏元素,同时保证它依然可以被显示屏阅读器访问。

此间有一个CodePen演示,突显了选择text-indent隐藏文本时标题的指南:
翻看笔记 图像替换 – 缩进方法,小编 SitePoint (@SitePoint),在CodePen。

动用边距 — Radu Darvas 方法

那项技艺仍旧是恫吓文本在浏览器窗口之外,不过是采纳边距去做的。那一个想法是使用一个很大的负的左手距,并且给标题一个针锋相对大的宽窄。

.replace-margin {
  width: 2264px;
  height: 106px;
  background: url("assets/logo.png") top right no-repeat;
  margin: 0 0 0 -2000px;
}

和上一种情状一致,大家的logo被用作标题的一个背景图片。那里有一个演示,突显了那项技艺是什么起效果的,首先是从未有过边距的,然后使用这一个边距:

翻看笔记 图像替换 – Margin
方法,作者
SitePoint
(@SitePoint),在CodePen。

设若直白滚动到右手,你最终见面到首个标题的背景。实际上,你不用担心滚动条,因为那个大的负边距补偿了小幅(就如你在第三个标题中观察标)。记住,那种办法对于浏览器执行来说并不敏捷,因为浏览器不得不画一个越发大的盒子。

<h1><a name=”mainContent”>Welcome</a></h1>

使用 Overflow — Leon Dwyer 方法

俺们早已在扩充一些内边距之后,使用过overflow特性来掩藏文本。本次我们将只是使用overflow质量来彻底隐藏元素。使用那一个技能必要,你将您的公文像从前那种办法同样包裹进一个元素中。这一次我们的CSS看起来像那样:

CSS

.replace-overflow { width: 264px; height: 106px; background:
url(“assets/logo.png”); } .replace-overflow span { display: block;
width: 0; height: 0; overflow: hidden; }

1
2
3
4
5
6
7
8
9
10
11
12
.replace-overflow {
  width: 264px;
  height: 106px;
  background: url("assets/logo.png");
}
 
.replace-overflow span {
  display: block;
  width: 0;
  height: 0;
  overflow: hidden;
}

大家将span元素的宽和高都设置成0。那会强制因素内的文本移到它的盒子外。接着文本会被overflow: hidden属性隐藏。那里有一个CodePen演示验证了那项技艺:

查阅笔记 图像替换 – Overflow
方法,作者 SitePoint
(@SitePoint),在
CodePen。

文本依旧可以被屏幕阅读器访问。因此,那里不会有可访问性的题材。

行使那种措施,文本仍能被屏幕阅读器获取到。可是,当文本右对齐的时侯,那种格局就不行了。由于那个text-indent,浏览器也亟需为大家的标题渲染一个那些大的盒子,那在部分很老旧的配备中可能会生出难题。

动用内边距 — Langridge 方法

本次大家使用padding-top特性把公文推出大家的标题之外。那些特性的值会被设置成与logo的高相等。不过,仅仅那么些是不够的,我们还须求使用overflow: hidden来掩藏文本。

.replace-padding {
  width: 264px;
  height: 0;
  background: url("assets/logo.png");
  padding: 106px 0 0 0;
  overflow: hidden;
}

和事先的三种方法相比较,这么些特质量够表现出更好的特性。它也提供了和事先三种艺术一致档次的可访问性。如下是这么些技术的一个示范,首个标题没有填写背景,第三个有:

翻看笔记 图像替换 –
内边距方法,作者
SitePoint
(@SitePoint),在
CodePen。

这样尽管只想让真正的链接变成灰色,但标题的始末颜色也会化为黄色,为了防止这些题材,CSS提供了多个伪类选用器

行使相对化定位 — Levin 方法

其一法子也要求一个额外的要一直办事。然则,这一个元素不是包装在文书周围的,而是用于固定咱们的图像。那里是其一措施的记号:

XHTML

<h1 class=”replace-position”> <span></span>SitePoint
</h1>

1
2
3
<h1 class="replace-position">
  <span></span>SitePoint
</h1>

这是CSS:

CSS

.replace-position { width: 264px; height: 106px; position: relative; }
.replace-position span { background: url(“assets/logo.png”); width:
100%; height: 100%; position: absolute; }

1
2
3
4
5
6
7
8
9
10
11
12
.replace-position {
  width: 264px;
  height: 106px;
  position: relative;
}
 
.replace-position span {
  background: url("assets/logo.png");
  width: 100%;
  height: 100%;
  position: absolute;
}

使用相对化定位来图像置换的以身作则可以在底下看看:

翻看笔记 图像替换 –
相对定位方法,作者 SitePoint
(@SitePoint),在
CodePen。

注意,为了完全覆盖大家的标题元素,宽和高都设置成了100%
。这几个办法的唯一问题是你选择的图纸必须是一心不透明的。如若不是那样的话,用户将可以通过你的图像看到文本。

Scott Kellum 方法
与其设置一个很大的负text-indent,你可以安装它为100%。那种措施下,浏览器不需求创设一个很大的盒子,质量会赢得进步。你不须求其余附加的标志就可以动用这几个艺术。你须要的CSS如下:

应用小的font-size— Lindsay 方法

另一种隐身文本的法门是让它变得这个小,并且将它的颜色设置成logo的背景。那种艺术不会潜移默化可访问性,然而出于一线的字体和假装的颜料,你也许会碰着SEO困难。

.replace-font {
  width: 264px;
  height: 106px;
  background: url("assets/logo.png");
  font-size: 1px;
  color: white;
}

此间有个该格局的示范,首个图像尚未安装font-size,而是在第三个图像中起了意义:

查阅笔记 图像替换 – font-size
方法,作者
SitePoint
(@SitePoint),在
CodePen。

假如你的logo没有一个纯粹的背景象来允许完美的犬牙相错,你依旧会碰着困难。那种气象下,你可以把颜色设置成transparent

:link 用来寻觅没有被访问过的链接

利用一个假冒的图像 — Radu Darvas Shim

以此艺术除了大家平常的元素之外,还必要一个冒充的图像来正常工作。这几个图像是一个
1×1 像素、透明的
GIF。它的首要目标是一旦图片不可能显得,将呈现给用户替代的公文。标记如下:

XHTML

<h1 class=”replace-image-span”> <img
src=”assets/transparent.gif” alt=”SitePoint” />
<span>SitePoint</span> </h1>

1
2
3
4
<h1 class="replace-image-span">
  <img src="assets/transparent.gif" alt="SitePoint" />
  <span>SitePoint</span>
</h1>

那是你必要使用的CSS:

CSS

.replace-image-span { width: 264px; height: 106px; background:
url(“assets/logo.png”); } .replace-image-span span{ display: none; }

1
2
3
4
5
6
7
8
9
.replace-image-span {
  width: 264px;
  height: 106px;
  background: url("assets/logo.png");
}
 
.replace-image-span span{
  display: none;
}

上边的以身作则应该会让您领悟知道那个办法是怎么起效的:

翻看笔记 图像替换 –
伪造图像形式,作者 SitePoint
(@SitePoint),在
CodePen。

固然真实的文书被隐形了,显示屏阅读器照旧可以读到替换的标签。所以,那个点子不会造成任何可访问性的难题。唯一的难点就是这里的标签是非语义化的和伪造的。其余,要是CSS和图像都被关闭的话,你将会看到这么些文件四遍。

亚洲必赢官网 4

应用 Display — Fahrner 图像置换

和其余措施分裂,那一个措施须要您增加额外的标志。那里的想法是把文件包裹进一个要素,并且安装它的display属性为none。这一个案例中的标记可以是:

<h1 class="replace-display">
  SitePoint
</h1>

CSS可以是:

.replace-display {
  width: 264px;
  height: 106px;
  background: url("assets/logo.png");
}

.replace-display span{
  display: none;
}

此处有一个示范,将我们的因素的display设置成none

查看笔记 图像替换 – Display
方法,作者
SitePoint
(@SitePoint),在CodePen。

这些法子就算很简单已毕,不过缺乏可访问性。这是因为display设置成none的元素会被显示屏阅读器忽略。当visibility设置成hidden时,同样的标题也会暴发,所以您也不可以用那几个。你能够安装opacity0。那样将会隐藏元素,同时保险它还是能被屏幕阅读器访问。

:visited 用来搜寻被访问过的链接

选拔真实的图像 — 使用内联图像的 Phark 方法

这一次,大家将采纳一个实打实的图像来做图像替换。那些图像有替换的文件,在图像不能显得时会显示出来。标记如下:

XHTML

<h1 class=”replace-image-link”> <img src=”assets/logo.png”
alt=”SitePoint” /> </h1>

1
2
3
<h1 class="replace-image-link">
  <img src="assets/logo.png" alt="SitePoint" />
</h1>

下边的CSS做了实在的替换:

CSS

.replace-image-link { width: 264px; height: 106px; background:
url(“assets/logo.png”); text-indent: -9999px; }

1
2
3
4
5
6
.replace-image-link {
  width: 264px;
  height: 106px;
  background: url("assets/logo.png");
  text-indent: -9999px;
}

下边的演示验证了这几个技能是何许行事的:

查看笔记 图像替换 –
真实图像技术,作者 SitePoint
(@SitePoint),在
CodePen。

你将会合到的图像不是出自竹签,而是源于background质量。除了我们事先探讨过的行使大的负文本缩进带来的标题,那项技能就好像也不便于SEO。那项技艺优于其余情势的一个亮点是,在CSS关闭的意况下图像依旧可见并且保持存在,可是问题是您干吗不直接动用它和谐的图像呢…

图片.png

使用 Overflow — Leon Dwyer 方法

咱俩早就在扩展一些内边距之后,使用过overflow质量来掩藏文本。这一次大家将只是使用overflow特性来根本隐藏元素。使用这些技术需求,你将您的公文像此前这种情势同样包裹进一个因素中。这一次大家的CSS看起来像这么:

.replace-overflow {
  width: 264px;
  height: 106px;
  background: url("assets/logo.png");
}

.replace-overflow span {
  display: block;
  width: 0;
  height: 0;
  overflow: hidden;
}

我们将span要素的宽和高都设置成0。那会强制因素内的文本移到它的盒子外。接着文本会被overflow: hidden品质隐藏。那里有一个CodePen演示验证了那项技能:

翻看笔记 图像替换 – Overflow
方法,作者
SitePoint
(@SitePoint),在
CodePen。

文本依然可以被显示屏阅读器访问。由此,这里不会有可访问性的难点。

a:link{color:red;}

使用 Clip-path

属性clip-path可以隐藏你指定的路线之外的有着东西。大家可以用它裁剪文本并将它隐藏。那个文件依旧可以被屏幕阅读器访问,只是被视觉上隐藏了。标记如下:

XHTML

<h1 class=”replace-clip-path”> <span>SitePoint</span>
</h1>

1
2
3
<h1 class="replace-clip-path">
  <span>SitePoint</span>
</h1>

那是您须要运用的 CSS :

CSS

.replace-clip-path { width: 264px; height: 106px; background:
url(“assets/logo.png”); } .replace-clip-path span{ clip-path:
polygon(0px 0px, 0px 0px, 0px 0px, 0px 0px); }

1
2
3
4
5
6
7
8
9
.replace-clip-path {
  width: 264px;
  height: 106px;
  background: url("assets/logo.png");
}
 
.replace-clip-path span{
  clip-path: polygon(0px 0px, 0px 0px, 0px 0px, 0px 0px);
}

您可以修改clip-path的值来看看文本是怎么被裁剪的:

查看笔记 图像替换 – clip-path
方法,作者 SitePoint
(@SitePoint),在
CodePen。

其一措施的绝无仅有难题就是浏览器如今还尚无完全辅助。SitePoint
近日有关clip-path属性亚洲必赢官网 ,发布了一篇小说,举办了更详细的阐释。浏览器一旦初阶帮忙它,图像替换技术就会变得剩下且没有需求了。

安装overflow为hidden可以隐藏文本,whitespace:nowrap
可以阻止换行。这种形式下,阅读器依旧可以读取文本。那里有一个这项技艺的演示:
查看笔记 图像替换 – ScottKellum 方法,小编 SitePoint
(@SitePoint),在CodePen。

使用相对化定位 — Levin 方法

本条主意也要求一个相当的因从来行事。然则,那个元素不是包装在文件周围的,而是用于固定大家的图像。那里是这些方式的标记:

<h1 class="replace-position">
  SitePoint
</h1>

这是CSS:

.replace-position {
  width: 264px;
  height: 106px;
  position: relative;
}

.replace-position span {
  background: url("assets/logo.png");
  width: 100%;
  height: 100%;
  position: absolute;
}

利用相对化定位来图像置换的演示能够在底下看到:

查看笔记 图像替换 –
绝对定位方法,作者
SitePoint
(@SitePoint),在
CodePen。

在意,为了完全覆盖大家的标题元素,宽和高都设置成了100%
。那些主意的唯一难点是您选择的图样必须是截然不透明的。倘若不是那样的话,用户将得以由此你的图像看到文本。

a:visited{color:green;}

利用伪元素 — Nash 图像替换

这么些技术使用一个伪元素把文件抛到一边。标记如下:

XHTML

<h1 class=”replace-pseudo”> SitePoint </h1>

1
2
3
<h1 class="replace-pseudo">
  SitePoint
</h1>

上面的 CSS 使那项技术生效:

CSS

.replace-pseudo { width: 264px; height: 106px; overflow: hidden; }
.replace-pseudo:before{ content: url(“assets/logo.png”); }

1
2
3
4
5
6
7
8
9
.replace-pseudo {
  width: 264px;
  height: 106px;
  overflow: hidden;
}
 
.replace-pseudo:before{
  content: url("assets/logo.png");
}

此间有一个技能演示:

翻开笔记 Image Replacement – Psuedo Element
Technique,作者 SitePoint
(@SitePoint),在CodePen。

这些伪元素将文件挤到一头。文本溢出,会被overflow: hidden
属性隐藏。那项技艺的一个题材是它只好工作在Internet Explorer 8 及以上。

利用边距 — Radu Darvas 方法
那项技艺仍然是强制文本在浏览器窗口之外,可是是选拔边距去做的。这几个想法是使用一个很大的负的左边距,并且给标题一个绝对大的增幅。

选择一个仿冒的图像 — Radu Darvas Shim

本条形式除了大家日常的要素之外,还亟需一个仿冒的图像来正常工作。这么些图像是一个
1×1 像素、透明的
GIF。它的要害目标是若是图片不能突显,将显得给用户替代的公文。标记如下:

<h1 class="replace-image-span">
  [站外图片上传中……(2)]
  SitePoint
</h1>

那是你必要运用的CSS:

.replace-image-span {
  width: 264px;
  height: 106px;
  background: url("assets/logo.png");
}

.replace-image-span span{
  display: none;
}

上面的以身作则应该会让您领悟驾驭那几个艺术是如何起效的:

查阅笔记 图像替换 –
伪造图像方式,作者
SitePoint
(@SitePoint),在
CodePen。

尽管真实的文本被埋伏了,屏幕阅读器照旧可以读到替换的标签。所以,那些方法不会导致其余可访问性的标题。唯一的难题就是此处的竹签是非语义化的和冒充的。其余,如若CSS和图像都被关门的话,你将会看出这些文件一次。

:hover和:active动态伪类拔取器

总结

### 这么些作者还写了:

  • 在CSS中隐藏元素的七种方式
  • 到家探讨jQuery中的事件

上述议论的各样方法都有投机的优缺点。总的来说,他们都将不便于SEO,即使你可以完全幸免使用它
— 那么现在是时候摆脱它们了!在 SitePoint
接下去的一篇文章中,我们将会看到行业里是何等摆脱他们的,并且了然当前最好的点子是何许。要是你想到了任何其余的主意,或者你对于大家研究的技巧具有补充,可以在底下评论。

*来自 PatCat (30/06/2016) 的更新:
这篇文章开端说到在网站标题中应用图像可能会对SEO和可访问性有负面影响。那不是真的。实际上,由于谷歌正在为图像替换做准备干活,情形或许反倒。我早已修改了那篇文章,
谢谢你们的评介!*

1 赞 4 收藏
评论

亚洲必赢官网 5

亚洲必赢官网 6

拔取真实的图像 — 使用内联图像的 Phark 方法

本次,我们将动用一个实打实的图像来做图像替换。那个图像有替换的文书,在图像不可以显得时会突显出来。标记如下:

<h1 class="replace-image-link">
  [站外图片上传中……(3)]
</h1>

上面的CSS做了实在的轮换:

.replace-image-link {
  width: 264px;
  height: 106px;
  background: url("assets/logo.png");
  text-indent: -9999px;
}

上边的言传身教验证了这一个技能是何许做事的:

查阅笔记 图像替换 –
真实图像技术,作者
SitePoint
(@SitePoint),在
CodePen。

你将相会到的图像不是源于竹签,而是源于background特性。除了我们事先商讨过的行使大的负文本缩进带来的标题,那项技能似乎也不便利SEO。那项技艺优于其他办法的一个优点是,在CSS关闭的意况下图像依旧可知并且维持存在,可是难题是您怎么不直接使用它和谐的图像呢…

:hover 用来搜寻鼠标停留处的要素

图片.png

使用 Clip-path

属性clip-path可以隐藏你指定的门道之外的有着东西。大家得以用它裁剪文本并将它隐藏。那一个文件如故可以被显示器阅读器访问,只是被视觉上隐藏了。标记如下:

<h1 class="replace-clip-path">
  SitePoint
</h1>

那是你须要运用的 CSS:

.replace-clip-path {
  width: 264px;
  height: 106px;
  background: url("assets/logo.png");
}

.replace-clip-path span{
  clip-path: polygon(0px 0px, 0px 0px, 0px 0px, 0px 0px);
}

你可以修改clip-path的值来看看文本是怎么被裁剪的:

查看笔记 图像替换 – clip-path
方法,作者
SitePoint
(@SitePoint),在
CodePen。

这一个主意的绝无仅有问题就是浏览器近期还并未完全支持。SitePoint
近期关于clip-path
属性通告了一篇小说,进行了更详细的阐释。浏览器一旦开端接济它,图像替换技术就会变得剩下且没有需要了。

:active 用来探寻被激活的元素

和上一种情况一致,大家的logo被用作标题的一个背景图片。那里有一个示范,呈现了这项技艺是什么样起效果的,首先是尚未边距的,然后使用这几个边距:
查看笔记 图像替换 – Margin 方法,作者 SitePoint
(@SitePoint),在CodePen。

行使伪元素 — Nash 图像替换

本条技能使用一个伪元素把文件抛到一边。标记如下:

<h1 class="replace-pseudo">
  SitePoint
</h1>

上面的 CSS 使那项技能生效:

.replace-pseudo {
  width: 264px;
  height: 106px;
  overflow: hidden;
}

.replace-pseudo:before{
  content: url("assets/logo.png");
}

那里有一个技能演示:

翻开笔记 Image Replacement – Psuedo Element
Technique,作者
SitePoint
(@SitePoint),在CodePen。

那个伪元素将文件挤到一边。文本溢出,会被overflow: hidden特性隐藏。这项技能的一个标题是它只可以工作在Internet
Explorer 8 及以上。

兑现鼠标停留和单击链接打开下划线

万一贯白滚动到右手,你最终会合到首个标题的背景。实际上,你不要顾虑滚动条,因为这些大的负边距补偿了步长(就像您在其次个标题中看到的)。记住,那种方法对于浏览器执行来说并不飞速,因为浏览器不得不画一个要命大的盒子。

总结

其一小编还写了:

  • 在CSS中隐藏元素的四种形式
  • 周到商量jQuery中的事件

上述议论的各种方法都有谈得来的优缺点。总的来说,他们都将不便利SEO,假设您可以完全防止使用它
— 那么现在是时候摆脱它们了!在 SitePoint
接下去的一篇小说中,我们将会晤到行业里是何许摆脱他们的,并且驾驭当下最好的法门是什么。假使你想到了其余其他的措施,或者您对此我们谈论的技术具有补充,可以在上边评论。


来自 PatCat (30/06/2016) 的更新:
那篇小说先河说到在网站标题中接纳图像可能会对SEO和可访问性有负面影响。那不是真的。实际上,由于谷歌(Google)正在为图像替换做准备干活,景况可能反倒。我早就修改了这篇文章,
谢谢你们的评说!

a:link , a:visited { text-decoration: none; }

利用内边距 — Langridge 方法
这一次大家利用padding-top
属性把文件推出大家的题目之外。那个特性的值会被设置成与logo的高相等。不过,仅仅这么些是不够的,咱们还亟需采用overflow:
hidden来掩藏文本。

a:hover , a:active { text-decoration: underline; }

亚洲必赢官网 7

对于上述示范中,选用器的顺序极度主要,若次序反过来鼠标停留和激活样式就不起功能了

图片.png

因为上述定义的七个规则有所同样的特殊性,所将来定义的条条框框优先

和从前的二种艺术相比,那一个特性可以表现出更好的质量。它也提供了和事先两种办法一致水平的可访问性。如下是其一技能的一个演示,第四个题目没有填写背景,第一个有:
查阅笔记 图像替换 – 内边距方法,作者 SitePoint (@SitePoint),在
CodePen。

a:link , a:visited , a:hover , a:active

采纳小的font-size — 林塞 方法
另一种隐身文本的主意是让它变得老大小,并且将它的颜料设置成logo的背景。那种办法不会潜移默化可访问性,可是由于微小的书体和假装的颜料,你恐怕会遇上SEO困难。

记住这些程序简单的法子:LoVe:HAte

亚洲必赢官网 8

1.1 将默认的下划线替换为点线,当鼠标停留或激活链接时,变成实线

图片.png

a:link , a:visited{

此地有个该办法的以身作则,第三个图像尚未设置font-size,而是在第一个图像中起了效益:
查阅笔记 图像替换 – font-size 方法,小编 SitePoint (@SitePoint),在
CodePen。

  text-decoration:none;

若果您的logo没有一个单一的背景象来允许完美的滥竽充数,你依旧会遇到困难。那种气象下,你可以把颜色设置成transparent。

  border-bottom:1px dotted #000;

应用 Display — Fahrner 图像置换
和此外艺术差异,这几个措施须要您增添额外的记号。那里的想法是把文件包裹进一个要素,并且安装它的display属性为none。这些案例中的标记可以是:

}

亚洲必赢官网 9

a:hover , a:active{

图片.png

  border-bottom-style: solid;

CSS可以是:

}

亚洲必赢官网 10

1.2 可以选取图片采用于链接

图片.png

a:link , a:visited{

此地有一个演示,将大家的元素的display设置成none:
查阅笔记 图像替换 – Display 方法,作者 SitePoint
(@SitePoint),在CodePen。

  color:#666;

其一措施就算很简单完结,可是缺少可访问性。这是因为display设置成none的元素会被屏幕阅读器忽略。当visibility设置成hidden时,同样的题材也会时有暴发,所以您也不可能用那个。你可以安装opacity为0。那样将会隐藏元素,同时保险它仍是可以够被显示器阅读器访问。

  text-decoration:none;

使用 Overflow — Leon Dwyer 方法
我们已经在加码一些内边距之后,使用过overflow属性来掩藏文本。本次大家将只是使用overflow属性来根本隐藏元素。使用那一个技能要求,你将您的文书像从前那种形式一致包裹进一个元素中。这一次大家的CSS看起来像这么:

  background: url(images/underline1.gif) repeat-x left bottom;

亚洲必赢官网 11

}

图片.png

a:hover , a:active{

咱俩将span元素的宽和高都安装成0。这会强制因素内的文本移到它的盒子外。接着文本会被overflow:
hidden属性隐藏。那里有一个CodePen演示验证了那项技艺:
查看笔记 图像替换 – Overflow 方法,小编 SitePoint (@SitePoint),在
CodePen。
文本仍旧可以被显示屏阅读器访问。由此,那里不会有可访问性的题材。

  background: url(images/underline1_hover.gif);

使用相对化定位 — Levin 方法
本条点子也必要一个外加的因一直工作。不过,那一个元素不是包装在文书周围的,而是用于固定我们的图像。那里是那些形式的号子:

}

亚洲必赢官网 12

1.3 杰出体现差别类型的链接

图片.png

@1 站内链接和站外链接加以不一致,能够再外部链接上加一个图标,一般约定为:一个框加一个箭头

这是CSS:

亚洲必赢官网 13

亚洲必赢官网 14

那种表面链接一般选取采纳质量选用器

图片.png

那种技能的办事形式是行使[att^=val]质量拔取器寻找以文件http:开首的具备链接:

使用相对化定位来图像置换的以身作则能够在底下看看:
翻看笔记 图像替换 – 相对定位方法,小编 SitePoint (@SitePoint),在
CodePen。

a[href=”http:”] {

留意,为了完全覆盖大家的标题元素,宽和高都设置成了100%
。这些办法的绝无仅有难题是您利用的图纸必须是全然不透明的。如果不是那样的话,用户将得以经过你的图像看到文本。

  background: url(images/externalLink.gif) no-repeat right top;

使用一个假冒的图像 — Radu Darvas Shim
其一措施除了我们平日的因素之外,还索要一个冒牌的图像来正常工作。那一个图像是一个
1×1 像素、透明的
GIF。它的机要目标是假诺图片无法显得,将显得给用户替代的文本。标记如下:

  padding-right:10px;

亚洲必赢官网 15

}

图片.png

@2 但那也会当选使用相对化URL而不是相持URL的内部链接,为防止那一个题材,需再一次设置指向自己站点的保有链接,删除它的外部图标:

这是你需求利用的CSS:

a[href=”http://www.yoursite.com”]
,a[href=”http://yoursite.com”] {

亚洲必赢官网 16

  background-image: none;

图片.png

  padding-right: 0;

上边的演示应该会让您精晓掌握这一个主意是怎么起效的:
查阅笔记 图像替换 – 伪造图像形式,作者 SitePoint (@SitePoint),在
CodePen。

}

纵然真实的文书被隐形了,显示器阅读器依旧可以读到替换的竹签。所以,那几个点子不会造成任何可访问性的标题。唯一的标题就是那里的价签是非语义化的和冒领的。其它,假如CSS和图像都被关闭的话,你将会看出这一个文件三回。

基本上说浏览器支持那种技能,老式的IE6会忽略它。

动用真实的图像 — 使用内联图像的 Phark 方法
本次,大家将应用一个实在的图像来做图像替换。那些图像有替换的文件,在图像无法突显时会显示出来。标记如下:

@3 对邮件链接出色显示

亚洲必赢官网 17

a[href=”mailto:”]{

图片.png

  background: url(images/email.png) no-repeat right top;

上边的CSS做了真正的更迭:

  padding-right: 10px;

亚洲必赢官网 18

}

图片.png

@4也足以卓越呈现非标准协议,如AIM即时音讯协议

上边的示范验证了那几个技能是怎么着工作的:
翻看笔记 图像替换 – 真实图像技术,小编 SitePoint (@SitePoint),在
CodePen。

a[href=”aim:”]{

您将见面到的图像不是缘于竹签,而是源于background属性。除了大家前面商量过的施用大的负文本缩进带来的题材,这项技术如同也不便民SEO。那项技能优于其余方法的一个亮点是,在CSS关闭的动静下图像依然可知并且维持存在,不过难点是您干吗不间接采纳它和谐的图像呢…

  background: url(images/aim.png) no-repeat right top;

使用 Clip-path
属性clip-path可以隐藏你指定的途径之外的有着东西。大家得以用它裁剪文本并将它隐藏。那一个文件仍可以被屏幕阅读器访问,只是被视觉上隐藏了。标记如下:

  padding-right: 10px;

亚洲必赢官网 19

}

图片.png

@5 卓绝体现可下载的文档和提要

那是您需求使用的 CSS :

那要利用[att$=val]特性选拔器,它寻找以特定值(如:.pdf,.doc)结尾的质量:

亚洲必赢官网 20

a[href$=”.pdf”]{

图片.png

  background: url(images/pdfLink.gif) no-repeat right top;

您可以修改clip-path的值来探视文本是怎么被裁剪的:

  padding-right: 10px;

以此艺术的唯一难点就是浏览器近期还平素不完全支持。SitePoint
目前关于clip-path属性公布了一篇小说,举办了更详细的演说。浏览器一旦早先协助它,图像替换技术就会变得剩下且并未要求了。

}

动用伪元素 — Nash 图像替换
那一个技术使用一个伪元素把公文抛到一边。标记如下:

a[href$=”.doc”]{

亚洲必赢官网 21

  background: url(images/docLink.gif) no-repeat right top;

图片.png

  padding-right: 10px;

上边的 CSS 使那项技能生效:

}

那边有一个技巧示范:

  1. 开创按钮和扭转

亚洲必赢官网 22

锚是行内元素,唯有在单击链接的内容时才能激活。可是,有时候希望完毕更像按钮的意义,有更大的可单击区域。

图片.png

为此,可以将锚的display属性设置为block,然后修改width,height和任何属性来创设须要的样式和单击区域

以此伪元素将文件挤到一头。文本溢出,会被overflow: hidden
属性隐藏。那项技术的一个标题是它只可以工作在InternetExplorer 8 及以上。

a{

总结
本条小编还写了:
在CSS中隐藏元素的三种艺术
一帆风顺研讨jQuery中的事件

  display: block;

上述议论的种种方法都有自己的得失。总的来说,他们都将不便于SEO,如若您可以完全幸免使用它
— 那么现在是时候摆脱它们了!在 SitePoint
接下去的一篇文章中,大家将会看出游业里是哪些摆脱他们的,并且精通当下最好的措施是什么样。倘使你想到了其他其余的不二法门,或者您对此大家谈论的技巧具有补充,可以在上边评论。

  width: 6em;

来自 PatCat (30/06/2016) 的革新:
这篇文章开端说到在网站标题中使用图像可能会对SEO和可访问性有负面影响。那不是真的。实际上,由于谷歌(Google)正在为图像替换做准备干活,景况也许反倒。我曾经修改了那篇小说,
谢谢你们的评介!

  padding:0.2em;

  line-height:1.4;

  background-color:#94B8E9;

  border:1px solid black;

  color:#000;

  text-decoration:none;

  text-align:center;

}

此地运用line-height来决定行高,而不是行使height,那实质上是采纳一个小技巧,能够使按钮中的文本垂直居中。

假设运用height,就无法不运用填充将文件压低,模拟出垂直居中的效果

注:如若没有设置width或height,那么就是设置display为block,IE6或以下版本也唯有会在链接文本时激活

2.1 简单的扭动

在鼠标停留时设置链接的背景观和文书颜色,从而完成简单的扭转效果

a:hover{

  background-color:#369;

  color:#fff;

}

2.2 具有图像的扭动

对此比较复杂的扭曲,需要接纳背景象,创建四个按钮图像,一个用于正常状态,一个用来鼠标停留状态

本来也可以创制激活状态的按钮图像

亚洲必赢官网 23

a:link , a:visited{

  display: block;

  width: 200px;

  height:40px;

  line-height:40px;

  color:#000;

  text-decoration:none;

  background: url(images/button.gif) no-repeat left top;

  text-indent:50px;

}

a:hover{

  background: #369 url(images/button_hover.gif) no-repeat left top;

  color:#fff;

}

2.3 Pixy样式的扭转

多图像方式的重中之重缺点是在浏览器第一遍加载鼠标停留图像时有短暂的延期。那会促成闪烁效果,让按钮感觉反应有点木讷

可以动用一个图像并切换它的背景地方,那种措施称之为Pixy方法

利用单个图片可以裁减对服务器的乞请数量,而且可以将具有按钮状态放在一个地点

亚洲必赢官网 24

对于正规状态,将扭曲图像对准右边,对于鼠标停留状态,对准左边

a:link , a:visited{

  display: block;

  width: 200px;

  height:40px;

  line-height:40px;

  color:#000;

  text-decoration:none;

  background: url(images/pixy-rollover.gif) no-repeat left top;

  text-indent:50px;

}

a:hover{

  background-color: #369 ;

  background-position: right top;

  color:#fff;

}

唯独不幸的是,固然是改变图像的针对格局,Windows上的IE依旧会向服务器请求新的图像,会发出轻微的闪耀

为了幸免闪烁,要求将扭转状态应用于链接的父元素:

p{

  background:#94B8E9 url(images/pixy-rollover.gif) no-repeat right
top;

}

2.4 已走访链接样式

可以对已走访的链接旁边添加一个复选框,以标示该链接已走访

a:visited{

  padding-right: 20px;

  background: url(images/check.gif) right middle;

}

也足以选取Pixy翻转方法,可以为未访问状态和已走访状态创造单一图像

亚洲必赢官网 25

css样式如上述

2.5 纯CSS工具提醒

工具提醒是当鼠标停留在富有title属性的要素上时部分浏览器弹出的艳情文本框

可以选用CSS定位技术成立纯CSS样式的工具提示,它以身作则了高档CSS的力量

<p>

  <a
href=”http://www.baidu.com/p/七星6609/”
class=”tooltip”>七星6609上空<span>(百度空间)</span></a>那是七星的百度空间欢迎浏览

</p>

先是要求做的是将锚的position属性设置为relative。那样就足以相对于父元素的地点对span的始末展开相对定位,不指望提示工具伊始就突显出来,所以应当将它的display属性设置为none:

a.tooltip{

  position: relative;

}

a.tooltip span {

  display:none;

}

当鼠标停留在那几个锚上时,希望突显span的内容,将span的display属性设置为block,不过只是在鼠标停留在那些链接上如此做

为了让span的内容出现在锚的左下方,要求将span的position属性设置为absolute,并将它定位到距锚顶部1em,距左侧2em

a.tooltip:hover span{

  display:block;

  position:absolute;

  top:1em;

  left:2em;

}

对span修饰一下

a.tooltip:hover span{

  display:block;

  position:absolute;

  top:1em;

  left:2em;

  padding:0.2em 0.6em;

  border:1px solid #996633;

  background-color:#FFFF66;

  color:#000;

}

不幸的是,那种技能在IE6或以下版本中稍加难题,但有个修复方法:

a.tooltip:hover {

  font-size:100%;

}

网站地图xml地图