威尼斯人线上娱乐

【威尼斯人线上娱乐】CSS学习笔记,负边距以及更加多格局

11 2月 , 2019  

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
可以阻止换行。那种艺术下,阅读器照旧可以读取文本。那里有一个那项技艺的言传身教:

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

CSS中的图像替换有着广阔而种种的野史。近日,假使您还想那样做,有广大距今仍旧有效的图像置换技术。必须小心的是,其中有些实在只怕迅速(假诺不是早就)
会被谷歌批判,所以要惶恐不安接纳。可是,你很难理解如何时候一个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可以阻挡换行。那种措施下,阅读器仍旧能够读取文本。那里有一个那项技艺的演示:

查看笔记 图像替换 – 斯科特 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的成分会被屏幕阅读器忽略。当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【威尼斯人线上娱乐】CSS学习笔记,负边距以及更加多格局。天性把公文推出大家的标题之外。这一个特性的值会被设置成与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和可访问性有负面影响。那不是真的。实际上,由于谷歌(Google)正在为图像替换做准备工作,情况大概反倒。我早就修改了那篇作品,
多谢你们的评介!*

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地图