Nascondi il testo usando CSS

Ho un tag nel mio html in questo modo:

<h1>My Website Title Here</h1>

Usando css voglio sostituire il testo con il mio logo attuale. Ho il logo lì senza problemi ridimensionando il tag e inserendo un'immagine di sfondo tramite CSS. Tuttavia, non riesco a capire come liberarmi del testo. L'ho già visto prima fondamentalmente spingendo il testo fuori dallo schermo. Il problema è che non ricordo dove l'ho visto.

Questo è un modo:

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

Ecco un altro modo per nascondere il testo evitando l'enorme scatola da 9999 pixel che il browser creerà:

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

Perché non usare semplicemente:

h1 { color: transparent; }

Aggiungi font-size: 0;al tuo elemento che contiene testo.

.hidden { font-size: 0; }

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

Il modo più cross-browser amichevole è scrivere l'HTML come

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

quindi utilizza CSS per nascondere l'intervallo e sostituire l'immagine

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

Se puoi usare CSS2, allora ci sono alcuni modi migliori di usare la contentproprietà, ma sfortunatamente il web non è ancora al 100%.

Nascondere il testo tenendo presente l'accessibilità:

Oltre alle altre risposte, ecco un altro approccio utile per nascondere il testo.

Questo metodo nasconde efficacemente il testo, ma gli consente di rimanere visibile per gli screen reader. Questa è un'opzione da considerare se l'accessibilità è un problema.

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

Vale la pena sottolineare che questa classe è attualmente utilizzata in Bootstrap 3 .

Se sei interessato a leggere sull'accessibilità:

• Web Accessibility Initiative (WAI)

• Documentazione sull'accessibilità MDN

Jeffrey Zeldman suggerisce la seguente soluzione:

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

Dovrebbe richiedere meno risorse -9999px;

Per favore leggi tutto qui:

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

Vedi mezzoblue per un bel riassunto di ogni tecnica, con punti di forza e di debolezza, oltre ad esempio html e css.

Tante soluzioni complicate.

Il più semplice è semplicemente usare:

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

puoi semplicemente nascondere il testo aggiungendo questo attributo:

font size: 0 !important;

Non utilizzare { display:none; }Rende inaccessibile il contenuto. Vuoi che gli screen reader vedano i tuoi contenuti e li modifichino visivamente sostituendo il testo con un'immagine (come un logo). Usando text-indent: -999px;o un metodo simile, il testo è ancora lì - solo non visivamente lì. Usa display:nonee il testo è sparito.

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

Quanto sopra funziona bene anche negli ultimi Thunderbird.

puoi usare la background-imageproprietà css e z-indexassicurarti che l'immagine rimanga davanti al testo.

Perché non usi:

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

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

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

Se non hai alcun elemento span o div, funziona perfettamente per i link.

La risposta è creare un intervallo con la proprietà

{display:none;}

Puoi trovare un esempio in questo sito

Questa è in realtà un'area matura per la discussione, con molte tecniche sottili disponibili. È importante selezionare / sviluppare una tecnica che soddisfi le tue esigenze, tra cui: screen reader, combinazioni di immagini / css / scripting on / off, seo, ecc.

Ecco alcune buone risorse per iniziare lungo la strada delle tecniche di sostituzione delle immagini standardista:

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

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

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

Utilizzare il tag condizione per browser diversi e utilizzando css è necessario posizionare height:0pxe width:0pxanche posizionare font-size:0px.

Se il punto è semplicemente rendere invisibile il testo all'interno dell'elemento, impostare l'attributo color su 0 opacity usando un valore rgba come color:rgba(0,0,0,0);clean e simple.

Non ricordo dove l'ho raccolto, ma lo uso da anni con successo.

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

Il mio mixin è in serbo, ma puoi usarlo come preferisci. Per buona misura in genere tengo una .hiddenclasse da qualche parte nel mio progetto da allegare agli elementi per evitare duplicazioni.

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

}

Prova questo codice per abbreviare e nascondere il testo

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

o per nascondere l'uso nella tua classe css .hidetxt { visibility: hidden; }

riqualificare il contenuto con il CSS

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

Di solito uso:

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

Se riusciamo a modificare il markup, la vita può essere più semplice, basta rimuovere il testo ed essere felici. Ma a volte il markup è stato inserito dal codice JS o semplicemente non ci è permesso modificarlo affatto, peccato che il CSS sia diventato l'unica arma a nostra disposizione.

Non è possibile posizionare un <span>testo a capo e nascondere l'intero tag. A proposito, alcuni browser non nascondono solo gli elementi, display:nonema disabilitano anche i componenti all'interno.

Sia font-size:0pxe color:transparentpuò essere buone soluzioni, ma alcuni browser non li capire. Non possiamo contare su di loro.

Suggerisco:

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

L'uso overflow:hiddenrafforza la nostra larghezza e altezza. Alcuni browser (non li chiameranno ... IE ) potrebbero leggere larghezza e altezza come min-widthe min-height. Voglio impedire che la casella venga ingrandita.

Usare il valore zero per font-sizee line-heightnell'elemento fa il trucco per me:

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

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

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

Per nascondere il testo da HTML, usa la proprietà text-indent in CSS

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

/ * per il testo dinamico è necessario aggiungere spazi bianchi, in modo che i CSS applicati non disturbino. nowrap significa che il testo non passerà mai alla riga successiva, il testo continua sulla stessa riga fino a quando non <br>viene rilevato un tag

Uno dei modi in cui ottengo questo è usare :beforeo :after. Ho usato questo approccio per diversi anni, e funziona particolarmente bene con le icone vettoriali glifi.

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

Questo ha funzionato per me con span (validazione knockout).

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

Una soluzione che funziona per me:

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

La risposta migliore funziona per il testo breve, ma se il testo si avvolge appare solo nell'immagine.

Un modo per farlo è catturare errori con un gestore jquery. Prova a caricare un'immagine, se non riesce genera un errore.

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

Vedi CODICE CAMPIONE

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