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的元素会被屏幕阅读器忽略。当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和可访问性有负面影响。这不是真的。实际上,由于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 — Lindsay 方法
另一种隐藏文本的方法是让它变得非常小,并且将它的颜色设置成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%;

}

本文由pc28.am发布于前端技术,转载请注明出处:CSS图像替换,文本缩进

上一篇:雪碧图自适应缩放,逐帧动画抖动解决方案 下一篇:没有了
猜你喜欢
热门排行
精彩图文
  • CSS图像替换,文本缩进
    CSS图像替换,文本缩进
    CSS图像替换:文本缩进,负边距以及更多方法 2016/07/04 · CSS ·图像替换 原文出处: BaljeetRathi   译文出处:众成翻译    CSS中的图像替换有着广泛而多样
  • 用法教程
    用法教程
    CSS Modules 用法教程 2016/06/19 · CSS ·Modules 初藳出处:阮一峰    学过网页开拓就能知晓,CSS 无法算编程语言,只是网页样式的一种描述方法。 为了让 CSS也
  • 最基本的多少个概念,面试希图之CSS
    最基本的多少个概念,面试希图之CSS
    CSS 最核心的几个概念 2015/08/26 · CSS · 5评论 ·CSS 原文出处:GeekPlux    本文将讲述 CSS中最核心的几个概念,包括:盒模型、position、float等。这些是 CSS的基
  • 详解HTML5中rel属性的prefetch预加载功效接纳,前端
    详解HTML5中rel属性的prefetch预加载功效接纳,前端
    前端质量优化 – 能源预加载 2015/11/19 · JavaScript· 预加载 原著出处: ROBINRENDLE   译文出处:bubkoo的博客(@问崖的崖)    当提到前端质量优化时,我们
  • 又不理解怎么命名class了
    又不理解怎么命名class了
    怎么样鬼,又不驾驭怎么命名class了 2015/10/25 · CSS ·class 原稿出处:结一(@结一w3cplus)    信任写css的人都会遇见下边的标题:  糟糕,怎么命名这一个