使用css隐藏文本-Java 学习之路

285

我的html中有一个标记，如下所示：

<h1>My Website Title Here</h1>

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

30 回答

0
这么多复杂的解决方案

最简单的就是使用：
```
color:rgba(0,0,0,0)
```
回复于 2024-04-28T22:54:49+08:00

147

这是一种方式：

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 */
}

这是another way隐藏文本，同时避免浏览器将创建的巨大的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;
}

回复于 2024-04-28T22:54:49+08:00

18
为什么不简单地使用：
```
h1 { color: transparent; }
```
回复于 2024-04-28T22:54:49+08:00

169

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

.hidden { font-size: 0; }

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

回复于 2024-04-28T22:54:49+08:00

1
最跨浏览器的友好方式是将HTML编写为
```
<h1><span>Website Title</span></h1>
```
然后使用CSS隐藏 Span 并替换图像
```
h1 {background:url(/nicetitle.png);}
h1 span {display:none;}
```
如果你可以使用CSS2，那么使用 content 属性有一些更好的方法，但不幸的是，网络还不是100％ .
回复于 2024-04-28T22:54:49+08:00
1
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/
回复于 2024-04-28T22:54:49+08:00
2
隐藏带有辅助功能的文本：

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

此方法有效地隐藏文本，但允许其对屏幕阅读器保持可见 . 这是一个考虑可访问性是否值得关注的选项 .
```
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
}
```
值得指出的是，这个类目前在_2391726中使用 .

如果您对阅读可访问性感兴趣：
- Web Accessibility Initiative (WAI)
- MDN Accessibility documentation
回复于 2024-04-28T22:54:49+08:00
3

请参阅mezzoblue以获得每种技术的精彩摘要，包括优点和缺点，以及示例html和css .

回复于 2024-04-28T22:54:49+08:00
1

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

回复于 2024-04-28T22:54:49+08:00

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

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

回复于 2024-04-28T22:54:49+08:00

407

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

回复于 2024-04-28T22:54:49+08:00

你为什么不用：

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

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

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

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

回复于 2024-04-28T22:54:49+08:00

5

答案是使用属性创建 Span

{display:none;}

你可以在this site找到一个例子

回复于 2024-04-28T22:54:49+08:00
2

这实际上是一个讨论成熟的领域，有许多微妙的技术可供选择 . 选择/开发满足您需求的技术非常重要，包括：屏幕阅读器，图像/ css /脚本开/关组合，seo等 .

以下是一些很好的资源，可以开始使用标准图像替换技术：

http://faq.css-standards.org/Image_Replacement

http://www.alistapart.com/articles/fir

http://veerle.duoh.com/blog/links/#l-10

回复于 2024-04-28T22:54:49+08:00
32

对不同的浏览器使用Condition标签并使用css你必须放置 height:0px 和 width:0px 你也必须放置 font-size:0px .

回复于 2024-04-28T22:54:49+08:00

h1 {
    text-indent: -3000px; 
    line-height: 3000px;
    background-image: url(/LOGO.png);
    height: 100px; width:  600px;  /* height and width are a must */

}

回复于 2024-04-28T22:54:49+08:00

4

如果该点只是使元素内的文本不可见，则使用rgba值（例如 color:rgba(0,0,0,0); clean和simple）将color属性设置为0不透明度 .

回复于 2024-04-28T22:54:49+08:00

尝试使用此代码缩短和隐藏文本

.hidetxt{

  width: 346px;
  display: table-caption;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: no-drop;
  
}

.hidetxt:hover { 

  visibility: hidden;
  
}

<div class="hidetxt">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when</p>
</div>

或隐藏在css类中的使用 .hidetxt { visibility: hidden; }

回复于 2024-04-28T22:54:49+08:00

使用CSS重新生成内容

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

回复于 2024-04-28T22:54:49+08:00

15
我通常使用：
```
span.hide
{
  position:fixed;
  right:-5000px;
}
```
回复于 2024-04-28T22:54:49+08:00
2
如果我们可以编辑标记，生活可以更容易，只需删除文本并快乐 . 但有时标记是由JS代码放置的，或者我们根本不允许编辑它，太糟糕的css变成了我们可以使用的唯一武器 .

我们不能放置 <span> 包装文本并隐藏整个标记 . 顺便说一下，有些浏览器不仅隐藏了 display:none 元素，还禁用了里面的组件 .

font-size:0px 和 color:transparent 都可能是很好的解决方案，但有些浏览器并不依赖它们 .

我建议：
```
h1 {
  background-image: url(/LOGO.png);  /* Our image */
  text-indent: -3000px;  /* Send text out of viewable area */
  height: 100px; width: 600px;  /* height and width are a must, agree */
  overflow:hidden;  /* make sure our size is respected */
}
```
使用 overflow:hidden 强制我们的宽度和高度 . 某些浏览器（不会将它们命名为IE）可能会将宽度和高度读为 min-width 和 min-height . 我想防止盒子被放大 .
回复于 2024-04-28T22:54:49+08:00

-1

在元素中为 font-size 和 line-height 使用零值对我来说很有用：

<style>
    .text {
        display: block;
        width: 200px;
        height: 200px;

        font-size: 0;
        line-height: 0;
    }
</style>

<span class="text">
    Invisible Text
</span>

回复于 2024-04-28T22:54:49+08:00

-1
要隐藏html中的文本，请在css中使用text-indent属性
```
.classname {
 text-indent: -9999px;
 white-space: nowrap; 
}
```
/ *表示动态文字你需要添加空格，所以你应用的CSS不会打扰 . nowrap表示文本永远不会换行到下一行，文本继续在同一行，直到遇到 <br> 标记
回复于 2024-04-28T22:54:49+08:00
19
我不记得我在哪里买了它，但已成功使用它多年 .
```
=hide-text()
    font: 0/0 a
    text-shadow: none
    color: transparent
```
我的mixin是sass，但你可以任何你认为合适的方式使用它 . 为了更好地衡量，我通常会在项目的某处保留一个 .hidden 类来附加元素以避免重复 .
回复于 2024-04-28T22:54:49+08:00

我实现此目的的方法之一是使用 :before 或 :after . 我已经使用这种方法已有好几年了，特别适用于字形矢量图标 .

h1 {
    position: relative;
    text-indent: -9999px;                 /* sends the text off-screen */
    }
h1:before {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    display: block;
    width: 600px;
    height: 100px;
    content: ' ';
    background: transparent url(/the_img.png) 0 0 no-repeat;
    }

回复于 2024-04-28T22:54:49+08:00

1
您可以通过添加此属性来隐藏文本：
```
font size: 0 !important;
```
回复于 2024-04-28T22:54:49+08:00

这对我来说很有效（敲门验证） .

<span class="validationMessage">This field is required.</span>

.validationMessage {
    background-image: url('images/exclamation.png');
    background-repeat: no-repeat;
    margin-left: 5px;
    width: 16px;
    height: 16px;
    vertical-align: top;

    /* Hide the text. */
    display: inline-block;
    overflow: hidden;
    font-size: 0px;
}

回复于 2024-04-28T22:54:49+08:00

一个适合我的解决方案：

HTML

<div class="website_title"><span>My Website Title Here</span></div>

CSS

.website_title {
    background-image: url('../images/home.png');
    background-repeat: no-repeat;
    height: 18px;
    width: 16px;
}

.website_title span {
    visibility: hidden;
}

回复于 2024-04-28T22:54:49+08:00

5
最佳答案适用于短文本，但如果文本包装它只是显示在图像中 .

一种方法是使用jquery处理程序捕获错误 . 尝试加载图像，如果失败则抛出错误 .
```
$('#logo img').error(function(){
    $('#logo').html('<h1>My Website Title Here</h1>');
});
```
见SAMPLE CODE
回复于 2024-04-28T22:54:49+08:00

h1{
   background:url("../images/logo.png") no-repeat;
   height:180px;
   width:200px;
   display:inline-block;
   font-size:0px !important;
   text-intent:-9999999px !important;
   color:transparent !important;
 }

回复于 2024-04-28T22:54:49+08:00

使用css隐藏文本

30 回答

隐藏带有辅助功能的文本：

相关问题