css替换

Image replacement in CSS has had a wide and varied history. In this modern age, if you are still looking to do so, there are many image replacement techniques that still work today. It is important to note that some of these could in fact be penalized by Google soon (if not already), so use sparingly. However, you never know when a CMS or project will force you to need to get out the image replacement kit! Here is that historical kit, in what might be the last image replacement technique list you’ll need before the web moves beyond this entirely.

CSS中的图像替换已有广泛而多样的历史。 在这个现代时代，如果您仍然希望这样做，那么今天仍然有许多图像替换技术仍然有效。 这是需要注意的是其中的一些可能确实非常重要的被谷歌惩罚很快(如果没有的话)，所以使用谨慎。 但是，您永远不知道CMS或项目何时会迫使您需要拿出图像更换套件！ 这是一个历史工具包，它可能是您在网络完全超越其之前需要的最后一个图像替换技术列表。

Artwork by SitePoint/Natalia Balska

SitePoint / Natalia Balska的作品

使用负文本缩进-Phark方法 (Using Negative Text-indent — The Phark Method)

This is the most common technique that most web developers have used at one point or another. The idea here is to move the text far outside the browser window by setting a large negative text-indent:

这是大多数Web开发人员在某一点或另一点使用的最普遍的技术。 这里的想法是通过设置一个较大的负text-indent将文本移到浏览器窗口之外：

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

Here is a CodePen demo showing how the heading looks with the text hidden using text-indent:

这是一个CodePen演示，显示标题如何隐藏，使用text-indent隐藏了text-indent ：

See the Pen Image replacement indenting by SitePoint (@SitePoint) on CodePen.

见笔图片替换的缩进由SitePoint( @SitePoint上) CodePen 。

The text is still accessible by screen readers using this method. However, this solution won’t work when the text is right aligned. The browser also needs to render a very large box for our header due to the text-indent value which can be problematic on very old devices.

屏幕阅读器仍然可以使用此方法访问文本。 但是，当文本右对齐时，此解决方案将不起作用。 由于text-indent值，在非常旧的设备上可能会出现问题，因此浏览器还需要为标头渲染一个很大的框。

斯科特·凯勒姆方法 (The Scott Kellum Method)

Instead of setting a large negative text-indent, you can set it to 100%. This way the browser won’t need to create a large box and the performance will improve. You don’t need any extra markup to use this method. Here is the CSS that you need:

您可以将其设置为100％，而不是设置较大的负text-indent 。 这样，浏览器将无需创建一个大盒子，并且性能将得到改善。 您不需要任何额外的标记即可使用此方法。 这是您需要CSS：

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

Setting overflow to hidden hides the text and whitespace: nowrap keeps it from moving onto the next line. The text will still be read by screen readers in this method. Here is a demo of this technique:

将overflow设置为hidden隐藏文本和whitespace: nowrap防止其移动到下一行。 屏幕阅读器仍然可以使用此方法读取文本。 这是此技术的演示：

See the Pen Image Replacement – Scott Kellum Technique by SitePoint (@SitePoint) on CodePen.

请参阅CodePen上的SitePoint ( @SitePoint )的笔图像替换 -Scott Kellum技术 。

使用边距— Radu Darvas技术 (Using Margin — Radu Darvas Technique)

This technique also forces the text outside of the browser window but uses margins to do so. The idea here is to apply very large negative left margin and give your header a correspondingly large width.

此技术还可以将文本强制显示在浏览器窗口之外，但要使用边距。 这里的想法是应用非常大的负左边距，并为标题提供相应的大宽度。

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

Just like the previous case, our logo is used as a background image for the heading. Here is a demo to show how this technique works, first without the margin and then with the margin applied:

与前面的情况一样，我们的徽标也用作标题的背景图片。 这是一个演示此技术如何工作的演示，首先没有边距，然后应用边距：

See the Pen Image Replacement – Margin Technique by SitePoint (@SitePoint) on CodePen.

请参阅CodePen上的SitePoint ( @SitePoint )的笔图像替换-边距技术 。

If you keep scrolling to the right you will eventually see the background for first heading. In reality, you won’t have to worry about the scrollbar because the large negative margin compensates for the width (as you can see with the second heading). Keep in mind that this method is not as efficient for the browser to perform because the browser has to draw a really large box.

如果继续向右滚动，最终将看到第一个标题的背景。 实际上，您不必担心滚动条，因为较大的负边距会补偿宽度(如第二个标题所示)。 请记住，此方法对浏览器执行效率不高，因为浏览器必须绘制一个很大的盒子。

使用填充-Langridge方法 (Using Padding — The Langridge Method)

This time we push the text outside of our header using the padding-top property. The property is to be set to a value that is equal to the height of our logo. However, this alone is not enough and we also have to use overflow: hidden to hide the text.

这次，我们使用padding-top属性将文本推入标题之外。 该属性的值应设置为等于徽标的高度。 但是，仅此一项是不够的，我们还必须使用overflow: hidden来隐藏文本。

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

Compared to the previous two methods, this property does a much better job performance wise. It also offers the same level of accessibility as the previous two methods. Below is a demo of this technique, the first heading does not have the padding background, while the second one does:

与前两种方法相比，此属性在工作性能方面要好得多。 它还提供了与前两种方法相同的可访问性级别。 以下是此技术的演示，第一个标题没有填充背景，而第二个标题有填充背景：

See the Pen Image Replacement – Padding Technique by SitePoint (@SitePoint) on CodePen.

请参阅CodePen上SitePoint ( @SitePoint )的笔图像替换-填充技术 。

使用小font-size — Lindsay方法 (Using Small font-size — The Lindsay Method)

Another way to hide text is make it very small and set its color to the background of your logo. This works without affecting accessibility but you might face SEO penalties because of the tiny font size and camouflaged color.

隐藏文本的另一种方法是使其很小，并将其颜色设置为徽标的背景。 这可以在不影响可访问性的情况下起作用，但是由于字体大小小和伪装的颜色，您可能会面临SEO的罚款。

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

Here is a demo for this method, the first image without the font-size fix and the second one with it in action:

这是此方法的演示，第一个图像未使用font-size固定，第二个图像使用了该font-size ：

See the Pen Image Replacement – font-size Technique by SitePoint (@SitePoint) on CodePen.

请参阅CodePen上的SitePoint ( @SitePoint )的“笔图像替换-字体大小技术” 。

You will still face problems if your logo does not have a flat background color to allow perfect blending. In that case, you can set the color to transparent.

如果您的徽标没有平坦的背景颜色以实现完美融合，您仍然会遇到问题。 在这种情况下，您可以将颜色设置为transparent 。

使用显示器-Fahrner图像更换 (Using Display — Fahrner Image Replacement)

Unlike other methods, this one requires you to add some extra markup. The idea here is to wrap your text in a <span> element and set its display property to none. The markup in this case would be:

与其他方法不同，此方法需要您添加一些额外的标记。 这里的想法是将文本包装在<span>元素中，并将其display属性设置为none 。 在这种情况下，标记为：

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

The CSS would be:

CSS将是：

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

Here is a demo with the display of our <span> element set to none:

这是一个演示，其< span >元素的display设置为none ：

See the Pen Image Replacement – Display Technique by SitePoint (@SitePoint) on CodePen.

请参阅CodePen上的SitePoint ( @SitePoint )的笔图像替换-显示技术 。

This method, while easy to implement, results in poor accessibility. This is because elements with display set to none are ignored by screen readers. The exact same issue occurs with visibility set to hidden so you can’t use that one either. What you can do is set opacity to 0. This will hide the element while still keeping it accessible to screen readers.

这种方法虽然易于实现，但可访问性很差。 这是因为屏幕阅读器会忽略display设置为“ none元素。 将visibility设置为hidden会发生完全相同的问题，因此您也不能使用该问题。 您可以将opacity设置为0 。 这将隐藏该元素，同时仍使屏幕阅读器可以访问它。

使用溢出-Leon Dwyer方法 (Using Overflow — The Leon Dwyer Method)

We have already used the overflow property to hide our text after adding some padding. This time we will use just the overflow property to hide the element completely. Using this technique requires that you wrap your text in a <span> element just like the previous method. Our CSS this time around looks like so:

添加一些填充后，我们已经使用了overflow属性来隐藏文本。 这次，我们将仅使用overflow属性来完全隐藏元素。 使用此技术需要像以前的方法一样将文本包装在<span>元素中。 这次我们CSS看起来像这样：

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

We set the width and height of our span element to zero. This forces the text inside the element to move out of its box. The text is then hidden by the overflow: hidden property. Here is a CodePen demo illustrating this technique:

我们将span元素的宽度和高度设置为零。 这将迫使元素内的文本移出其框。 然后，文本将由overflow: hidden属性overflow: hidden 。 这是一个CodePen演示，说明了此技术：

See the Pen Image Replacement – Overflow Technique by SitePoint (@SitePoint) on CodePen.

请参阅CodePen上的SitePoint ( @SitePoint )的笔图像替换-溢出技术 。

The text is still accessible to screen readers. Hence, there are no accessibility issues.

文本仍可供屏幕阅读器访问。 因此，不存在可访问性问题。

使用绝对定位-Levin技术 (Using Absolute Positioning — The Levin Technique)

This method also requires an additional <span> element to work. However, the <span> element is not wrapped around the text but used to position our image. Here is the markup for this method:

此方法还需要其他<span>元素才能起作用。 但是， <span>元素并不环绕文本，而是用于放置图像。 这是此方法的标记：

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

Here is the CSS:

这是CSS：

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

The demo for image replacement with absolute positioning is visible below:

下面是用于绝对位置替换图像的演示：

See the Pen Image Replacement – Absolute Positioning Technique by SitePoint (@SitePoint) on CodePen.

请参阅CodePen上的SitePoint ( @SitePoint )的笔图像替换-绝对定位技术 。

Notice that the width and height are set to 100% to completely cover our header element. The only problem with this technique is that the images you use must be completely opaque. If that’s not the case then users will be able to see the text through your image.

请注意，宽度和高度设置为100％，以完全覆盖我们的标头元素。 此技术的唯一问题是您使用的图像必须完全不透明。 如果不是这种情况，那么用户将能够通过您的图像看到文本。

使用伪造图像— Radu Darvas Shim (Using a Bogus Image — Radu Darvas Shim)

This method also requires a bogus image in addition to our usual <span> element to work properly. The image is a 1×1 pixel transparent GIF. Its main purpose is to show users the alt text if images are turned off. Here is the markup:

除了正常的<span>元素，此方法还需要伪造的图像才能正常工作。 图像是1×1像素的透明GIF。 其主要目的是在关闭图像的情况下向用户显示替代文本。 这是标记：

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

This is the CSS that you need to apply:

这是您需要应用CSS：

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

The demo below should make it clear how this method works:

下面的演示应清楚说明此方法的工作原理：

See the Pen Image Replacement – Bogus Image Technique by SitePoint (@SitePoint) on CodePen.

请参阅CodePen上的笔图像替换 -SitePoint( @SitePoint )的伪造 图像技术 。

Even though the actual text is hidden, screen readers will still be able to read the alt tag. So, this method does not create any accessibility issues. The only problem here is that the <img> tag is non-semantic and bogus in this case. Moreover, you will see the text two times if both the CSS as well as the images are turned off.

即使隐藏了实际的文本，屏幕阅读器仍将能够读取alt标签。 因此，此方法不会产生任何可访问性问题。 这里唯一的问题是<img>标签在这种情况下是非语义的和伪造的。 此外，如果同时关闭CSS和图像，您将看到两次文本。

使用实际图像—内联图像的Phark方法 (Using Actual Image — Phark Method with Inline Image)

This time, we will use an actual image for image replacement. The image has alt text that will be shown when images are turned off. Here is the markup:

这次，我们将使用实际图像进行图像替换。 图像具有替代文本，这些文本将在图像关闭时显示。 这是标记：

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

The following CSS does the actual replacement:

以下CSS进行实际替换：

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

The demo below illustrates how this technique works:

下面的演示说明了此技术的工作原理：

See the Pen Image Replacement – Actual Image Technique by SitePoint (@SitePoint) on CodePen.

见笔图片替换-实际图像技术由SitePoint( @SitePoint上) CodePen 。

The image you will see now is not from the <img> tag but from the background property. Besides the issue with large negative text-indent that we discussed earlier, this technique does not seem to be good for SEO. One advantage that this technique offers over others is that the image will still be visible with CSS turned off and images kept on but one questions why you wouldn’t just keep the image there on its own…

您现在看到的图像不是来自<img>标记，而是来自background属性。 除了我们之前讨论过的带有较大否定文本缩进的问题外，该技术似乎对SEO并不好。 与其他技术相比，此技术提供的一个优势是，关闭CSS并保留图像后，仍然可以看到图像，但是有一个疑问，为什么您不只是将图像单独保存在其中……

使用剪切路径 (Using Clip-path)

The clip-path property hides everything that is outside the path specified by you. We can use it to clip our text and hide it. The text will still be accessible to screen readers but would be hidden visually. Here is the markup:

clip-path属性将隐藏您指定的路径之外的所有内容。 我们可以使用它来裁剪文本并将其隐藏。 文本仍可供屏幕阅读器访问，但会在视觉上隐藏。 这是标记：

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

This is the CSS that you need to apply:

这是您需要应用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);
}

You can change the values of clip-path to see how the text is being clipped:

您可以更改clip-path的值以查看文本如何被裁剪：

See the Pen Image Replacement – clip-path Technique by SitePoint (@SitePoint) on CodePen.

请参阅CodePen上的SitePoint ( @SitePoint )的笔图像替换-剪切路径技术 。

The only problem with this technique is that browser support is not good enough just yet. SitePoint recently published an article on the clip-path property which discusses the property in much more detail. By the time browser support is ready for this, it’s likely to be unnecessary in most situations as image replacement techniques become redundant.

这种技术的唯一问题是浏览器支持还不够好。 SitePoint最近发布了有关clip-path属性的文章，其中对该属性进行了更为详细的讨论。 当浏览器支持为此做好准备时，由于图像替换技术变得多余，因此在大多数情况下可能已经没有必要了。

使用伪元素— Nash图像替换 (Using Pseudo Element — Nash Image Replacement)

This technique uses a pseudo element to push the text aside. Here is the markup:

此技术使用伪元素将文本推到一边。 这是标记：

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

The following CSS makes this technique work:

以下CSS使此技术有效：

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

Here is the demo to show this technique in action:

这是演示此技术的实际演示：

See the Pen Image Replacement – Psuedo Element Technique by SitePoint (@SitePoint) on CodePen.

见笔图片替换-的伪单元技术由SitePoint( @SitePoint上) CodePen 。

The pseudo element pushes the text aside. The text then overflows and is hidden by using the overflow: hidden property. One issue with this technique is that it only works with Internet Explorer 8 and above.

伪元素将文本推到一边。 然后，文本会溢出，并使用overflow: hidden属性将其overflow: hidden 。 此技术的一个问题是它仅适用于Internet Explorer 8及更高版本。

结论 (Conclusion)

Each of the techniques I discussed above has its own pros and cons. In general, these aren’t likely to be good for SEO in the near future and if you can avoid using them entirely — now is the time to move beyond these! In an upcoming article here at SitePoint, we will be looking at how the industry is moving beyond these and what current best practice is today. If you have any other techniques that you would like to reminisce over or if you have something else to add regarding the techniques we discussed, please comment below.

我上面讨论的每种技术都有其优点和缺点。 总的来说，这些在不久的将来不太可能对SEO有利，如果您可以避免完全使用它们，那么现在是时候超越这些了！ 在SitePoint上即将发表的一篇文章中，我们将研究行业如何超越这些领域以及当今的最佳实践。 如果您想回忆一下其他任何技术，或者对我们讨论过的技术还有其他补充，请在下面评论。

Update from PatCat (30/06/2016): The article originally stated that using images in site headers would negatively affect SEO and accessibility. This isn’t true. In fact, the opposite could be true with Google’s potential penalizations for image replacement. I’ve since corrected the article, thank you to the keen eyes of commenters for bringing this to my attention!

PatCat的更新(2016/06/30)：该文章最初指出，在网站标题中使用图像会对SEO和可访问性产生负面影响。 这不是真的 实际上，对于Google可能会为图片替换带来的惩罚，情况恰恰相反。 自那以来，我已对文章进行了更正，感谢评论者敏锐的眼睛将其引起我的注意！

翻译自: https://www.sitepoint.com/css-image-replacement-text-indent-negative-margins-and-more/

css替换