Masquer le texte en utilisant css

J’ai un tag dans mon HTML comme ceci:

My Website Title Here

En utilisant css je veux remplacer le texte par mon logo actuel. Je n’ai pas de problème avec le logo en redimensionnant l’étiquette et en plaçant une image d’arrière-plan via css. Cependant, je ne peux pas comprendre comment se débarrasser du texte. Je l’ai déjà vu auparavant en repoussant le texte de l’écran. Le problème est que je ne peux pas me rappeler où je l’ai vu.

C’est un moyen:

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

Voici une autre façon de cacher le texte en évitant l’énorme boîte de 9999 pixels que le navigateur va créer:

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

Pourquoi ne pas simplement utiliser:

 h1 { color: transparent; } 

Ajoutez simplement font-size: 0; à votre élément qui contient du texte.

 .hidden { font-size: 0; } 
  font-size: 0; hides text.  

La méthode la plus conviviale pour tous les navigateurs consiste à écrire le code HTML

 

Website Title

puis utilisez CSS pour masquer la plage et remplacer l’image

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

Si vous pouvez utiliser CSS2, il existe de meilleures façons d’utiliser la propriété content , mais malheureusement, le Web n’y est pas encore à 100%.

Jeffrey Zeldman suggère la solution suivante:

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

Il devrait être moins gourmand en ressources que -9999px;

S’il vous plaît lire tout à ce sujet ici:

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

Voir mezzoblue pour un bon résumé de chaque technique, avec des forces et des faiblesses, ainsi que des exemples de HTML et CSS.

Cacher le texte en tenant compte de l’accessibilité:

En plus des autres réponses, voici une autre approche utile pour masquer le texte.

Cette méthode masque efficacement le texte, tout en lui permettant de restr visible pour les lecteurs d’écran. C’est une option à considérer si l’accessibilité est une préoccupation.

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

Il convient de souligner que cette classe est actuellement utilisée dans Bootstrap 3 .


Si vous souhaitez en savoir plus sur l’accessibilité:

  • Initiative pour l’accessibilité du Web (WAI)

  • Documentation d’accessibilité MDN

Ne pas utiliser { display:none; } { display:none; } Cela rend le contenu inaccessible. Vous voulez que les lecteurs d’écran voient votre contenu et le modifient visuellement en remplaçant le texte par une image (comme un logo). En utilisant text-indent: -999px; ou une méthode similaire, le texte est toujours là – juste pas visuellement là. Utilisez display:none et le texte est parti.

Tant de solutions compliquées.

Le plus simple est simplement d’utiliser:

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

Vous pouvez utiliser la propriété css background-image et z-index pour vous assurer que l’image rest devant le texte.

Pourquoi n’utilisez-vous pas:

 
  • bla
  • a { opacity: 0.0; font-size: 1px; } li { background-image: url('test.jpg'); }

    Si vous n’avez pas d’élément span ou div, cela fonctionne parfaitement pour les liens.

    La réponse est de créer une travée avec la propriété

    {display:none;}

    Vous pouvez trouver un exemple sur ce site

    C’est en fait un domaine propice à la discussion, avec de nombreuses techniques subtiles disponibles. Il est important que vous sélectionniez / développiez une technique qui réponde à vos besoins, y compris: lecteurs d’écran, combinaisons d’activation / désactivation d’images / css / script, référencement, etc.

    Voici quelques ressources utiles pour vous initier aux techniques de remplacement d’images standard:

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

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

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

      

    Ce qui précède fonctionne bien dans la dernière version de Thunderbird.

    Utilisez la balise Condition pour un navigateur différent et en utilisant css vous devez placer la height:0px et width:0px aussi vous devez placer font-size:0px .

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

    Si le but est simplement de rendre le texte à l’intérieur de l’élément invisible, définissez l’atsortingbut de couleur sur 0 en utilisant une valeur rgba telle que color:rgba(0,0,0,0); propre et simple

    Essayez ce code pour raccourcir et masquer le texte

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

    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

    repalce le contenu avec le CSS

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

    J’utilise habituellement:

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

    Si nous pouvons éditer le balisage, la vie peut être plus facile, il suffit de supprimer le texte et d’être heureux. Mais parfois, le balisage a été placé par le code JS ou nous n’avons tout simplement pas le droit de l’éditer, trop mauvais css est devenu la seule arme mise à notre disposition.

    Nous ne pouvons pas placer un enveloppant le texte et masquer la balise entière. Par ailleurs, certains navigateurs ne cachent pas seulement des éléments avec display:none mais désactive également les composants à l’intérieur.

    Les deux font-size:0px et color:transparent peut être une bonne solution, mais certains navigateurs ne les comprennent pas. Nous ne pouvons pas compter sur eux.

    Je suggère:

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

    Utiliser le overflow:hidden renforce notre largeur et hauteur. Certains navigateurs (ne les nommeront pas … IE ) peuvent lire la largeur et la hauteur comme min-width et min-height . Je veux empêcher que la boîte soit agrandie.

    Utiliser la valeur zéro pour font-size de la font-size et la line-height de la line-height dans l’élément me convient parfaitement:

       Invisible Text  

    Pour masquer le texte de HTML, utilisez la propriété text-indent dans css

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

    / * pour le texte dynamic, vous devez append un espace blanc, donc votre CSS appliqué ne gênera pas. nowrap signifie que le texte ne sera jamais renvoyé à la ligne suivante, que le texte continue sur la même ligne jusqu’à ce qu’une balise
    soit rencontrée

    Une des façons d’y parvenir est d’utiliser :before ou :after . J’ai utilisé cette approche pendant plusieurs années et fonctionne particulièrement bien avec les icons vectorielles de glyphes.

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

    Cela a fonctionné pour moi avec span (validation par KO).

     This field is required. .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; } 

    Une solution qui fonctionne pour moi:

    HTML

     
    My Website Title Here

    CSS

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

    Je ne me souviens pas où je l’ai trouvé, mais je l’utilise depuis des années.

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

    Mon mixin est dans sass mais vous pouvez l’utiliser comme bon vous semble. Pour faire bonne mesure, je garde généralement une classe .hidden quelque part dans mon projet pour attacher des éléments afin d’éviter la duplication.

    La meilleure réponse fonctionne pour les textes courts, mais si le texte s’enroule, il apparaît simplement dans l’image.

    Une façon de le faire est de détecter les erreurs avec un gestionnaire de jquery. Essayez de charger une image, si elle échoue, cela génère une erreur.

     $('#logo img').error(function(){ $('#logo').html('

    My Website Title Here

    '); });

    Voir le code exemple

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