摘要:CSS中的图像替换有着广泛而多样的历史。如今,如果你还想这么做,有很多至今仍然有效的图像置换技术。希望阅读本篇文章以后大家有所收获,帮助大家对HTML+CSS的理解更加深入。
CSS中的图像替换有着广泛而多样的历史。如今,如果你还想这么做,有很多至今仍然有效的图像置换技术。必须注意的是,其中一些实际上可能很快(如果不是已经) 会被Google批判,所以要谨慎使用。然而,你很难知道什么时候一个CMS或者项目会迫使你需要get out图像替换kit!这里是过去的kit,在web完全落实之前,这可能是最后一份你需要的图像替换技术列表。
使用负的文本缩进 — Phark 方法
这是web开发人员在某些情况下使用的最普遍的技术。这里的想法是通过设置一个很大的负text-indent,让文本远离浏览器窗口:
.replace-indent { width: 264px; height: 106px; background: url("assets/logo.png"); text-indent: -9999px; }
使用这种方法,文本仍然可以被屏幕阅读器获取到。然而,当文本右对齐的时侯,这种方法就行不通了。由于这个text-indent,浏览器也需要为我们的标题渲染一个非常大的盒子,这在一些很老旧的设备中可能会产生问题。
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; }
设置overflow为hidden可以隐藏文本,whitespace: nowrap 可以阻止换行。这种方法下,阅读器仍然可以读取文本。这里有一个这项技术的演示:
查看笔记 图像替换 – Scott Kellum 方法,作者 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。
如果一直滚动到右边,你最终会看到第一个标题的背景。实际上,你不必担心滚动条,因为这个大的负边距补偿了宽度(就像你在第二个标题中见到的)。记住,这种方法对于浏览器执行来说并不高效,因为浏览器不得不画一个非常大的盒子。
使用内边距 — 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。
使用小的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。
使用 Display — Fahrner 图像置换
和其他方法不同,这个方法需要你增加额外的标记。这里的想法是把文本包裹进一个元素,并且设置它的display属性为none。这个案例中的标记可以是:
<h1 class="replace-display"> <span>SitePoint</span> </h1>
CSS可以是:
.replace-display { width: 264px; height: 106px; background: url("assets/logo.png"); } .replace-display span{ display: none; }
这个方法虽然很容易实现,但是缺乏可访问性。这是因为display设置成none的元素会被屏幕阅读器忽略。当visibility设置成hidden时,同样的问题也会发生,所以你也不能用那个。你可以设置opacity为0。这样将会隐藏元素,同时保持它仍然可以被屏幕阅读器访问。
使用 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属性隐藏。
使用绝对定位 — Levin 方法
这个方法也需要一个额外的元素来工作。然而,这个元素不是包裹在文本周围的,而是用于定位我们的图像。这里是这个方法的标记:
<h1 class="replace-position"> <span></span>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% 。这个方法的唯一问题是你使用的图片必须是完全不透明的。如果不是这样的话,用户将可以透过你的图像看到文本。
使用一个伪造的图像 — Radu Darvas Shim
这个方法除了我们平常的元素之外,还需要一个伪造的图像来正常工作。这个图像是一个 1×1 像素、透明的 GIF。它的主要目的是如果图片不能显示,将显示给用户替代的文本。标记如下:
<h1 class="replace-image-span"> <img src="assets/transparent.gif" alt="SitePoint" /> <span>SitePoint</span> </h1>
这是你需要应用的CSS:
.replace-image-span { width: 264px; height: 106px; background: url("assets/logo.png"); } .replace-image-span span{ display: none; }
尽管真实的文本被隐藏了,屏幕阅读器仍然可以读到替换的标签。所以,这个方法不会造成任何可访问性的问题。唯一的问题就是这里的标签是非语义化的和伪造的。此外,如果CSS和图像都被关闭的话,你将会看到这个文本两次。
使用真实的图像 — 使用内联图像的 Phark 方法
这次,我们将使用一个真实的图像来做图像替换。这个图像有替换的文本,在图像不能显示时会显示出来。标记如下:
<h1 class="replace-image-link"> <img src="assets/logo.png" alt="SitePoint" /> </h1>
下面的CSS做了真正的替换:
.replace-image-link { width: 264px; height: 106px; background: url("assets/logo.png"); text-indent: -9999px; }
你将会看到的图像不是来自标签,而是来自background属性。除了我们之前讨论过的使用大的负文本缩进带来的问题,这项技术似乎也不利于SEO。这项技术优于其他方法的一个优点是,在CSS关闭的情况下图像依然可见并且保持存在,但是问题是你为什么不直接使用它自己的图像呢…
使用 Clip-path
属性clip-path可以隐藏你指定的路径之外的所有东西。我们可以用它裁剪文本并将它隐藏。这个文本仍然可以被屏幕阅读器访问,只是被视觉上隐藏了。标记如下:
<h1 class="replace-clip-path"> <span>SitePoint</span> </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); }
这个方法的唯一问题就是浏览器目前还没有完全支持。
使用伪元素 — Nash 图像替换
这个技术使用一个伪元素把文本抛到一边。标记如下:
<h1 class="replace-pseudo"> SitePoint </h1>
下面的 CSS 使这项技术生效:
.replace-pseudo { width: 264px; height: 106px; overflow: hidden; } .replace-pseudo:before{ content: url("assets/logo.png"); }
这个伪元素将文本挤到一边。文本溢出,会被overflow: hidden 属性隐藏。这项技术的一个问题是它只能工作在Internet Explorer 8 及以上。
总结
上述讨论的每个方法都有自己的优缺点。总的来说,他们都将不利于SEO,如果你可以完全避免使用它 — 那么现在是时候摆脱它们了!
本文由职坐标整理发布,学习更多的相关知识,请关注职坐标WEB前端HTML/CSS频道!
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了,明天再试试吧!
我们会在第一时间安排职业规划师联系您!
您也可以联系我们的职业规划师咨询:
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
沪公网安备 31011502005948号