标准 CSS 图片替换 | CSS-Tricks

h1#logo {
   width: 200px; // width of image
   height: 100px; // height of image
   background: url(../path/to/image.jpg); 
   text-indent: -9999px;
}

此技巧归功于 Mike Rundle，被称为 Phark 方法。还有更多 CSS 图片替换技巧。

Sunny Singh

# 2009年9月20日

我喜欢这种技术，因为它不需要任何跨度并且效果完美。此外，当您尝试选择背景图像时，它在 Firefox 中不会移动，除非它是链接，这很好。

我认为 CSS 应该包含某种文本替换属性，因为这仍然看起来更像是一种技巧。

Mickey

# 2010年11月1日

您好，

我使用了此技术，但我在 Google Chrome 中注意到一个小问题：text-indent 使元素宽度增加了 9999px。所以我必须在 CSS 中添加“overflow: hidden”。

Jon Stuebe

# 2010年12月13日

我喜欢这种文本替换，但我总是喜欢使用 em 而不是像素，以确保此文本绝不在窗口附近，我同意 @mickey 关于 overflow: hidden 的说法。

GlitchMr

# 2011年7月3日

为什么不直接使用简单的 HTML4 呢？

<img src="../path/to/image.jpg" width="200" height="100" alt="图片替换">

没有更多复杂的技巧。HTML4 太棒了。

Dietmar Krause

评论永久链接# 2012年1月26日

一个例子：您可以使用自定义徽标图像更改 WordPress 博客标题文本（通常是 h1 标签），而无需在 php 中进行编码。换句话说，您可以为屏幕阅读器隐藏徽标。

Laurence Powell

# 2011年7月7日

我喜欢这种技术，但是当有人在智能手机上查看我的网站 http://www.commercial-london-epc.co.uk/ 时，文本会覆盖背景图像。我想知道是否有人找到了解决方法？我注意到的另一个缺点是，很多人会尝试直观地点击标题以导航回主页。

Josh

# 2014年10月6日

我有点困惑……

我一直在寻找如今如何进行图像替换，并在 css-tricks 上找到了一些不错的文章，讨论了各种技术的来龙去脉。

由于它们基本上都尝试围绕文本在页面上的放置位置进行操作，试图隐藏它，因此我对任何一个都不太放心。

我现在自己想出了一个技术，但我在这里找不到，这让我有点意外，因为它很简单。

有人可以解释一下，为什么使用 rgba 并简单地将文本设置为透明（如下所示）可能是一个坏主意吗？

Html

<h1 class="title">My Page Title</h1>

Css

.title {
    background: url('/images/logo.png');
    color: transparent;
    display: block;
    height: 240px;
    width: 240px;
}

谢谢，

Josh

Jayakrishnan

评论永久链接# 2017年7月20日

我在我的项目中也使用了相同的方法，并且没有遇到任何问题。

评论

发表回复 取消回复

发表回复取消回复