CSS图像更换：文本内部，负边距等等

> CSS图像替换：现代技术的综合指南

> CSS图像更换，一种用于将文本与图像交换的技术，拥有丰富的历史。 尽管许多方法仍然有效，但由于SEO原因，有些方法可能会面临Google的处罚。 本指南提供了现有技术的完整概述，承认其潜在的缺点，并建议何时考虑替代方案。

关键因素：

存在几种CSS图像替代技术，但有些可能会对SEO产生负面影响。 谨慎使用。

• 屏幕读取器的可访问性至关重要；无论视觉替换如何
现代网络开发提供了通常提供更好性能和SEO的替代方案。
• 图像替换技术：

负面

（phark方法）：
1. 这种广泛使用的方法通过应用大型负

   。 text-indent text-indentpros：

   >简单，广泛支持。

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

   >
   • cons：不适用于右键的文本，会影响较旧设备的性能。 请参阅Codepen Demo [链接到Codepen Demo]。
   （Scott kellum方法）：这种优化的方法将
   设置为100％，通过避免渲染大型盒子来提高性能。

2. text-indent: 100%pros：提高性能，维护屏幕读取器可访问性。text-indent

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

   cons：
   >无显着意义。请参阅Codepen Demo [链接到Codepen Demo]。
   • 负边缘（Radu Darvas技术）：使用大的负边距将文本推开屏幕。

3. pros：>与各种元素类型一起使用。>

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

   cons：
   >由于渲染大盒子而导致的浏览器性能差。请参阅Codepen Demo [链接到Codepen Demo]。
   • >>填充（langridge方法）：>使用填充物，
   隐藏文本。

4. PROS：良好的性能，保持可访问性。overflow: hidden>

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

   cons：
   相对较少的常见。请参阅Codepen Demo [链接到Codepen Demo]。
   • >小（lindsay方法）：
   >通过使用微小的
   和匹配文本颜色与背景匹配。>

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

   • PROS：简单。
   • cons：>伪装文本引起的潜在SEO处罚，可能与不均匀背景无法完美地工作。请参阅Codepen Demo [链接到Codepen Demo]。

5. display: none>（fahrner映像替换）：>在包装元素上使用display: none隐藏文本。

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

   • PROS：简单。
   • cons：可访问性差（屏幕读取器忽略display: none）。

6. overflow: hidden（Leon Dwyer方法）：>通过在零尺寸的包装器上设置overflow: hidden来掩盖文本。

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

   • pros：维护可访问性。
   cons：
   • >需要额外的标记。请参阅Codepen Demo [链接到Codepen Demo]。
7. 绝对定位（Levin Technique）：

   绝对将图像定位在容器中。>

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

   PROS：
   简单。
   • cons：
   需要不透明的图像。请参阅Codepen Demo [链接到Codepen Demo]。
伪造的映像（radu darvas shim）：在禁用图像时使用透明的gif用于alt文本显示。

8. pros：

   提供alt文本。

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

   • cons：
   • >带有
   的实际图像：
   >使用带有alt文本的图像，并使用
>。
9. 隐藏文本

   text-indentpros：text-indent即使在禁用CSS的情况下也可以看到图像。

   >

   .replace-display span {
     display: none;
   }

   cons：
   • >潜在的SEO问题，大型负缺点。请参阅Codepen Demo [链接到Codepen Demo]。
   • text-indent
   ：
   >使用
属性剪辑文本。

10. clip-pathpros：clip-path维护可访问性。

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

    cons：
    >有限的浏览器支持。请参阅Codepen Demo [链接到Codepen Demo]。
    • > pseudo-element（）（nash映像更换）：
    使用伪元素显示图像，并用
    。

11. PROS：::before相对干净。 overflow: hidden

    cons：

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

    >有限的IE支持。请参阅Codepen Demo [链接到Codepen Demo]。
    • 结论：

      尽管这些技术仍然具有功能，但现代网络开发通常提供了优越的替代方案。 考虑使用直接应用于元素的SVG，图标字体或背景图像，以提高性能，SEO和可维护性。 选择取决于特定上下文和项目要求。 始终优先考虑可访问性和SEO最佳实践。

      >常见问题（常见问题解答）：（这些是释义和巩固的）

      什么是CSS映像更换？
      • > 如何工作？
      通过用大的负面凹痕将文本推开，以隐藏文本。
      • text-indent> ？
      的限制不适用于左右语言，潜在的性能问题。
      • text-indent什么是phark方法？一种基于常见的技术。
      • > leahy/langridge方法？ 用CSS？在>标签中替换图像？改用背景图像。text-indent
      >
      • >使用CSS？是的，使用>属性。 text-indent
      >最佳实践吗？ 如果无法正确完成，则
      • >SEO冲击？谨慎使用。<img alt="CSS图像更换：文本内部，负边距等等" > 在现代网络开发中的相关性>>在某些利基案例中仍然相关，但通常被更好的替代方案所取代。
      >
      • 记住将和background替换为图像的实际路径。 始终在不同的浏览器和设备上进行彻底测试。

以上是CSS图像更换：文本内部，负边距等等的详细内容。更多信息请关注PHP中文网其他相关文章！