Ocultar texto usando css

Eu tenho uma tag no meu html assim:

<h1>My Website Title Here</h1>

Usando css, quero substituir o texto pelo meu logotipo real. Eu tenho o logotipo não há problema através de redimensionar a tag e colocar uma imagem de fundo via css. No entanto, não consigo descobrir como se livrar do texto. Eu já vi isso basicamente empurrando o texto para fora da tela. O problema é que não me lembro onde o vi.

Esta é uma maneira:

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

Aqui está outra maneira de ocultar o texto, evitando a enorme caixa de 9999 pixels que o navegador criará:

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;
}

Por que não usar simplesmente:

h1 { color: transparent; }

Basta adicionar font-size: 0;ao seu elemento que contém texto.

.hidden { font-size: 0; }

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

A maneira mais amigável entre navegadores é escrever o HTML como

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

depois use CSS para ocultar a extensão e substituir a imagem

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

Se você pode usar CSS2, existem maneiras melhores de usar a contentpropriedade, mas infelizmente a web ainda não está 100% lá.

Ocultando o texto com a acessibilidade em mente:

Além das outras respostas, aqui está outra abordagem útil para ocultar o texto.

Esse método oculta efetivamente o texto, mas permite que ele permaneça visível para os leitores de tela. Esta é uma opção para considerar se a acessibilidade é uma preocupação.

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

Vale ressaltar que esta classe é usada atualmente no Bootstrap 3 .

Se você estiver interessado em ler sobre acessibilidade:

• Iniciativa de acessibilidade da Web (WAI)

• Documentação de acessibilidade MDN

Jeffrey Zeldman sugere a seguinte solução:

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

Deve consumir menos recursos do que -9999px;

Leia tudo aqui:

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

Veja mezzoblue para um bom resumo de cada técnica, com pontos fortes e fracos, além de exemplos de html e css.

Tantas soluções complicadas.

O mais fácil é simplesmente usar:

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

você pode simplesmente ocultar seu texto adicionando este atributo:

font size: 0 !important;

Não use { display:none; }Torna o conteúdo inacessível. Você deseja que os leitores de tela vejam seu conteúdo e o estilizem visualmente, substituindo o texto por uma imagem (como um logotipo). Usando text-indent: -999px;ou um método semelhante, o texto ainda está lá - apenas não visualmente. Use display:nonee o texto se foi.

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

O acima funciona bem no Thunderbird mais recente também.

você pode usar a background-imagepropriedade css e z-indexgarantir que a imagem fique na frente do texto.

Por que você não usa:

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

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

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

Se você não possui nenhum elemento span ou div, ele funciona perfeitamente para links.

A resposta é criar uma extensão com a propriedade

{display:none;}

Você pode encontrar um exemplo neste site

Esta é realmente uma área propícia à discussão, com muitas técnicas sutis disponíveis. É importante que você selecione / desenvolva uma técnica que atenda às suas necessidades, incluindo: leitores de tela, combinações de imagens / css / scripting on / off, SEO, etc.

Aqui estão alguns bons recursos para começar o caminho das técnicas de substituição de imagem padrão:

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

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

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

Use a tag Condição para um navegador diferente e use o css que você precisa colocar height:0pxe width:0pxtambém precisa colocar font-size:0px.

Se o objetivo é simplesmente tornar o texto dentro do elemento invisível, defina o atributo color para ter 0 opacidade usando um valor rgba, como color:rgba(0,0,0,0);limpo e simples.

Não me lembro de onde peguei isso, mas o uso com sucesso há séculos.

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

Meu mixin é sass no entanto, você pode usá-lo da maneira que quiser. Para uma boa medida, geralmente mantenho uma .hiddenclasse em algum lugar do meu projeto para anexar aos elementos para evitar duplicação.

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

}

Experimente este código para reduzir e ocultar o texto

.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>

ou ocultar o uso em sua classe css .hidetxt { visibility: hidden; }

repalce o conteúdo com o CSS

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

Eu costumo usar:

span.hide
{
  position:fixed;
  right:-5000px;
}

Se podemos editar a marcação, a vida pode ser mais fácil, basta remover o texto e ser feliz. Mas, às vezes, a marcação foi colocada pelo código JS ou simplesmente não temos permissão para editá-la, o css ruim se tornou a única arma colocada à nossa disposição.

Não podemos colocar <span>o texto em forma de quebra e ocultar a tag inteira. A propósito, alguns navegadores não apenas ocultam elementos, display:nonecomo também desabilitam os componentes internos.

Ambas font-size:0pxe color:transparentpodem ser boas soluções, mas alguns navegadores não as entendem. Não podemos confiar neles.

Eu sugiro:

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

Usar overflow:hiddenreforça nossa largura e altura. Alguns navegadores (não os nomearão ... IE ) podem ler largura e altura como min-widthe min-height. Quero impedir que a caixa seja ampliada.

Usar o valor zero para font-sizee line-heightno elemento faz o truque para mim:

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

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

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

Para ocultar o texto do html, use a propriedade indent de texto no css

.classname {
 text-indent: -9999px;
 white-space: nowrap; 
}

/ * para texto dinâmico, é necessário adicionar espaço em branco, para que o css aplicado não seja perturbado. nowrap significa que o texto nunca será quebrado para a próxima linha, o texto continuará na mesma linha até que uma <br>tag seja encontrada

Uma das maneiras de conseguir isso é usar :beforeor :after. Eu uso essa abordagem há vários anos e, particularmente, funciona muito bem com ícones de vetor de glifo.

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;
    }

Isso funcionou para mim com extensão (validação de nocaute).

<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;
}

Uma solução que funciona para mim:

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;
}

A melhor resposta funciona para textos curtos, mas se o texto for agrupado, ele aparecerá na imagem.

Uma maneira de fazer isso é capturar erros com um manipulador de jquery. Tente carregar uma imagem, se ela falhar, gera um erro.

$('#logo img').error(function(){
    $('#logo').html('<h1>My Website Title Here</h1>');
});

Consulte CÓDIGO DE AMOSTRA

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;
 }