使用css隐藏文本

Question

我的html中有一个标记,如下所示:

<h1>My Website Title Here</h1>

使用CSS我想用我的实际徽标替换文本.通过调整标签大小并在via css中放置背景图像,我的徽标没有问题.但是,我无法弄清楚如何摆脱文本.我之前已经看过它,基本上是将文本从屏幕上移开.问题是我不记得我在哪里看到它.

Answer 1

这是一种方式:

h1 {
    text-indent: -9999px;                 /* sends the text off-screen */
    background-image: url(/the_img.png);  /* shows image */
    height: 100px;                        /* be sure to set height & width */
    width: 600px;
    white-space: nowrap;            /* because only the first line is indented */
}

h1 a {
    outline: none;  /* prevents dotted line when link is active */
}

这是隐藏文本的另一种方法,同时避免浏览器将创建的巨大的9999像素框:

h1 {
    background-image: url(/the_img.png);  /* shows image */
    height: 100px;                        /* be sure to set height & width */
    width:  600px;

    /* Hide the text. */
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}

Answer 2

为什么不简单地使用:

h1 { color: transparent; }

Answer 3

只需添加font-size: 0;到包含文本的元素即可.

.hidden { font-size: 0; }

  font-size: 0; hides text. <span class="hidden"> You can't see me :) </span>

Answer 4

最跨浏览器的友好方式是将HTML编写为

<h1><span>Website Title</span></h1>

然后使用CSS隐藏跨度并替换图像

h1 {background:url(/nicetitle.png);}
h1 span {display:none;}

如果你可以使用CSS2,那么有一些更好的方法使用该content属性,但不幸的是,网络还不是100%.

Answer 5

隐藏带有可访问性的文本:

除了其他答案,这是另一种隐藏文本的有用方法.

此方法有效地隐藏文本,但允许其对屏幕阅读器保持可见.这是一个考虑可访问性是否值得关注的选项.

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
}

值得指出的是,这个类目前在Bootstrap 3中使用.

如果您有兴趣阅读有关可访问性的信息:

• 网络无障碍倡议(WAI)

• MDN辅助功能文档

Answer 6

Jeffrey Zeldman提出以下解决方案:

.hide-text {
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}

它应该比资源密集度低 -9999px;

请在这里阅读所有相关内容:

http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/

Answer 7

请参阅mezzoblue,了解每种技术的优点,包括优点和缺点,以及示例html和css.

Answer 8

您可以通过添加此属性来简单地隐藏您的文本：

font-size: 0 !important;

Answer 9

这么多复杂的解决方案

最简单的就是使用:

color:rgba(0,0,0,0)

Answer 10

不要使用{ display:none; }它会使内容无法访问.您希望屏幕阅读器能够看到您的内容,并通过用图像(如徽标)替换文本来对其进行视觉设计.通过使用text-indent: -999px;或类似的方法,文本仍然存在 - 只是在视觉上没有.使用display:none,文字消失了.

Answer 11

答案是使用属性创建跨度

{display:none;}

您可以在此站点找到示例

Answer 12

您可以使用css background-image属性并z-index确保图像保留在文本前面.

Answer 13

<style>
body {
     visibility:hidden
}
body .moz-signature p{
    visibility:visible
}
</style>

以上在最新的Thunderbird中运行良好.

Answer 14

你为什么不用:

<li><a href="#">bla</a></li>

a {
    opacity: 0.0;
    font-size: 1px;
}

li {
    background-image: url('test.jpg');
}

如果您没有任何span或div元素,它对链接非常有效.

Answer 15

我不记得我是在哪里找到它的，但我已经成功使用它很多年了。

  =hide-text()
    font: 0/0 a
    text-shadow: none
    color: transparent

我的 mixin 是在 sass 中的，但是你可以以任何你认为合适的方式使用它。为了更好地衡量，我通常.hidden在项目中的某个位置保留一个类来附加到元素以避免重复。

Answer 16

用 CSS 替换内容

 h1{  font-size: 0px;}
 h1:after {
    content: "new content";
    font-size: 15px;
  }

Answer 17

通过使用属性，可以在 CSS 中直接进行内容替换content。

这似乎最常用于生成::before伪::after元素，但也可用于替换现有 HTML 元素的内容。

对于原来的例子

<h1>My Website Title Here</h1>

这是用徽标替换文本的 CSS：

        h1 {
            content: url(mywebsitelogo.png);
            width: 100%;
        }

在伪元素中，任何图像内容都无法调整大小（除非将其用作背景图像），但替换内容的情况并非如此。

默认情况下，图像将以其实际大小显示，并在必要时扩展容器，就像它包含实际<img>元素一样。

在此示例中，width: 100%用于使徽标图像适合全宽。如果图像应该根据需要缩小以适应，但如果容器大于图像则从不扩展，则max-width: 100%可以使用它。

根据 MDN 的说法，唯一不支持CSS 内容替换的常规浏览器是 Internet Explorer。