Am un tag in html mea ca aceasta:
<h1>My Website Title Here</h1>
Folosind css vreau să înlocuiți textul cu logo-ul real. Am'avem logo-ul nu există nici o problemă prin redimensionarea tag-ul și de a pune o imagine de fundal în prin intermediul css. Cu toate acestea, pot't mi dau seama cum să scape de text. Am'am văzut cum se face practic prin împingerea textul de pe ecran. Problema e ca't amintesc unde am vazut-o.
Aceasta este o modalitate de:
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 */
}
Aici este un alt mod pentru a ascunde textul evitând în același timp mare de 9999 de pixel cutie care browser-ul va crea:
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;
}
Cel mai mult cross-browser-ul prietenos mod este de a scrie HTML ca
<h1><span>Website Title</span></h1>
apoi, utilizați CSS pentru a ascunde durata și înlocui imaginea
h1 {background:url(/nicetitle.png);}
h1 span {display:none;}
Dacă puteți folosi CSS2, atunci există unele modalități mai bune folosind
În plus față de alte răspunsuri, aici este o altă abordare utilă pentru a ascunde textul.
Această metodă ascunde în mod eficient textul, dar îi permite să rămână vizibile pentru cititoarele de ecran. Aceasta este o opțiune să ia în considerare dacă accesibilitatea este un motiv de îngrijorare.
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
border: 0;
}
L's valoare de subliniind faptul că această clasă este utilizată în prezent în Bootstrap 3.
Daca're interesat în a citi despre accesibilitate:
Jeffrey Zeldman sugerează următoarea soluție:
.hide-text {
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
Ar trebui să fie mai puțin consumatoare de resurse decat -9999px;
Vă rugăm să citiți totul despre asta aici:
http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/
A nu se folosi { display:none; }
Se face conținutul inaccesibile. Vrei cititoare de ecran pentru a vedea conținutul dvs., și vizual stil prin înlocuirea textului cu o imagine (cum ar fi un logo). Prin utilizarea text-indent: -999px;
sau o metodă similară, textul este încă acolo — nu doar vizual acolo. Folosesc display:none`, iar textul este plecat.
De ce nu't utilizați:
<li><a href="#">bla</a></li>
a {
opacity: 0.0;
font-size: 1px;
}
li {
background-image: url('test.jpg');
}
Dacă te-ai't orice interval sau element div, functioneaza perfect pentru link-uri.
Aceasta este de fapt o zonă coapte pentru discuții, cu multe subtile tehnici disponibile. Este important să selectați/dezvolta o tehnică care îndeplinește nevoile dvs., inclusiv: cititoare de ecran, imagini/css/scripting on/off combinații, seo, etc.
Aici sunt unele resurse bune pentru a obține a început drumul de standardista imagine tehnici de înlocuire:
http://faq.css-standards.org/Image_Replacement
Răspunsul este de a crea un interval cu proprietatea
{display:none;}
Puteți găsi un exemplu la acest site
Încercați acest cod pentru a scurta și ascunde textul
.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>
sau pentru a ascunde utilizarea în clasă css .hidetxt { visibility: hidden; }
Eu nu't amintesc de unde am luat asta, dar au fost folosind-o cu succes pentru vârstele.
=hide-text()
font: 0/0 a
text-shadow: none
color: transparent
Mi mixin este în sass cu toate acestea, puteți folosi orice fel tu de cuviință. Pentru o bună măsură, în general, am păstrați-o.ascunse` clasa undeva în proiectul meu de a atașa elemente pentru a evita duplicarea.