Ukryj tekst za pomocą css

Mam tag w moim html:

<h1>My Website Title Here</h1>

Za pomocą css chcę zamienić tekst na moje rzeczywiste logo. Mam logo, że nie ma problemu, zmieniając rozmiar tagu i umieszczając obraz tła za pomocą css. Nie mogę jednak wymyślić, jak pozbyć się tekstu. Widziałem to wcześniej, po prostu wypychając tekst z ekranu. Problem polega na tym, że nie pamiętam, gdzie to widziałem.

To jest jeden sposób:

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

Oto kolejny sposób, aby ukryć tekst, unikając ogromnego pola 9999 pikseli, które utworzy przeglądarka:

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

Dlaczego nie po prostu użyć:

h1 { color: transparent; }

Po prostu dodaj font-size: 0;do elementu zawierającego tekst.

.hidden { font-size: 0; }

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

Najbardziej przyjaznym dla różnych przeglądarek sposobem jest napisanie HTML jako

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

następnie użyj CSS, aby ukryć zakres i zastąpić obraz

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

Jeśli możesz użyć CSS2, istnieje kilka lepszych sposobów korzystania z tej contentwłaściwości, ale niestety sieć nie jest jeszcze w 100% dostępna.

Ukrywanie tekstu z myślą o ułatwieniach dostępu:

Oprócz innych odpowiedzi, oto inne przydatne podejście do ukrywania tekstu.

Ta metoda skutecznie ukrywa tekst, ale pozwala pozostać widocznym dla czytników ekranu. Jest to opcja do rozważenia, czy dostępność stanowi problem.

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

Warto zauważyć, że ta klasa jest obecnie używana w Bootstrap 3 .

Jeśli chcesz przeczytać o dostępności:

• Inicjatywa dostępności sieci (WAI)

• Dokumentacja dostępności MDN

Jeffrey Zeldman sugeruje następujące rozwiązanie:

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

Powinno to wymagać mniej zasobów niż -9999px;

Przeczytaj o tym wszystko tutaj:

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

Zobacz mezzoblue, aby uzyskać ładne podsumowanie każdej techniki, z mocnymi i słabymi stronami, a także przykładowy HTML i CSS.

Tak wiele skomplikowanych rozwiązań.

Najłatwiej jest po prostu użyć:

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

możesz po prostu ukryć tekst, dodając ten atrybut:

font size: 0 !important;

Nie używaj { display:none; }Powoduje, że treść jest niedostępna. Chcesz, aby czytniki ekranu widziały Twoje treści i wizualnie je stylizowały, zastępując tekst obrazem (np. Logo). Korzystając text-indent: -999px;z podobnej metody, tekst nadal tam jest - tylko wizualnie. Użyj display:none, a tekst zniknie.

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

Powyższe działa również w najnowszym Thunderbirdzie.

możesz użyć background-imagewłaściwości css i z-indexupewnić się, że obraz pozostaje przed tekstem.

Dlaczego nie używasz:

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

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

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

Jeśli nie masz żadnego elementu span lub div, działa idealnie dla linków.

Odpowiedzią jest utworzenie zakresu z właściwością

{display:none;}

Możesz znaleźć przykład na tej stronie

W rzeczywistości jest to obszar dojrzały do ​​dyskusji, z wieloma dostępnymi subtelnymi technikami. Ważne jest, aby wybrać / opracować technikę spełniającą Twoje potrzeby, w tym: czytniki ekranu, kombinacje włączania / wyłączania skryptów, obrazy / css / skrypty, seo itp.

Oto kilka dobrych zasobów na początek standardowych technik zastępowania obrazów:

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

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

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

Użyj znacznika Warunek dla innej przeglądarki i używając css musisz umieścić, height:0pxa width:0pxtakże musisz umieścić font-size:0px.

Jeśli chodzi o to, aby tekst wewnątrz elementu był niewidoczny, ustaw atrybut koloru tak, aby miał 0 krycia, używając wartości rgba, takiej jak color:rgba(0,0,0,0);czysty i prosty.

Nie pamiętam, gdzie to wziąłem, ale z powodzeniem go używam od wieków.

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

Mój mixin jest w sass, jednak możesz go używać w dowolny sposób. Dla pewności trzymam .hiddenklasę gdzieś w moim projekcie, aby dołączyć do elementów, aby uniknąć powielania.

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

}

Wypróbuj ten kod, aby skrócić i ukryć tekst

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

lub aby ukryć użycie w swojej klasie css .hidetxt { visibility: hidden; }

repalce treści za pomocą CSS

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

Zwykle używam:

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

Jeśli możemy edytować znaczniki, życie może być łatwiejsze, wystarczy usunąć tekst i być szczęśliwym. Ale czasami znaczniki zostały umieszczone przez kod JS lub po prostu nie możemy go w ogóle edytować, szkoda, że ​​css okazało się jedyną bronią, jaką mamy do dyspozycji.

Nie możemy umieścić <span>zawijania tekstu i ukryć całego tagu. Nawiasem mówiąc, niektóre przeglądarki nie tylko ukrywają elementy, display:noneale także wyłączają elementy wewnątrz.

Zarówno font-size:0pxi color:transparentmoże być dobre rozwiązania, ale niektóre przeglądarki nie ich zrozumieć. Nie możemy na nich polegać.

Sugeruję:

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

Korzystanie overflow:hiddenwymusza naszą szerokość i wysokość. Niektóre przeglądarki (nie będą ich nazywać ... IE ) mogą odczytywać szerokość i wysokość jako min-widthi min-height. Chcę zapobiec powiększeniu pudełka.

Użycie wartości zerowej dla elementu font-sizei line-heightw elemencie robi dla mnie lewę:

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

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

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

Aby ukryć tekst przed HTML, użyj właściwości wcięcia tekstu w css

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

/ * w przypadku tekstu dynamicznego należy dodać spację, aby zastosowany css nie przeszkadzał. nowrap oznacza, że ​​tekst nigdy nie będzie zawijany do następnego wiersza, tekst będzie kontynuowany w tym samym wierszu, aż do <br>napotkania znacznika

Jednym ze sposobów, w jaki to osiągam, jest użycie :beforelub :after. Stosowałem to podejście od kilku lat, a szczególnie dobrze działa z ikonami wektorowymi glifów.

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

To działało dla mnie z rozpiętością (walidacja nokautu).

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

Rozwiązanie, które działa dla mnie:

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

Najlepsza odpowiedź działa w przypadku krótkiego tekstu, ale jeśli tekst jest zawijany, po prostu pojawia się na obrazie.

Jednym ze sposobów na to jest łapanie błędów w module obsługi jquery. Spróbuj załadować obraz, jeśli się nie powiedzie, pojawi się błąd.

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

Zobacz PRZYKŁADOWY KOD

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