Saya memiliki tag di html seperti ini:
<h1>My Website Title Here</h1>
Menggunakan css saya ingin mengganti teks dengan logo yang sebenarnya. I've got logo tidak ada masalah via resize tag dan menempatkan gambar latar belakang dalam melalui css. Namun, saya dapat't tahu bagaimana untuk menyingkirkan teks. I've melihat hal itu dilakukan sebelum pada dasarnya dengan menekan teks dari layar. Masalahnya adalah saya dapat't ingat di mana aku melihatnya.
Ini adalah salah satu cara:
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 */
}
Berikut ini adalah cara lain untuk menyembunyikan teks sambil menghindari besar 9999 pixel kotak itu browser akan membuat:
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;
}
Yang paling cross-browser yang cocok untuk cara ini adalah untuk menulis HTML sebagai
<h1><span>Website Title</span></h1>
kemudian menggunakan CSS untuk menyembunyikan span dan mengganti gambar
h1 {background:url(/nicetitle.png);}
h1 span {display:none;}
Jika anda dapat menggunakan CSS2, maka ada beberapa cara yang lebih baik menggunakan content
properti, tapi sayangnya web isn't 100% belum ada.
Selain jawaban yang lain, di sini adalah pendekatan yang berguna untuk menyembunyikan teks.
Metode ini efektif menyembunyikan teks, namun memungkinkan untuk tetap terlihat untuk pembaca layar. Ini adalah pilihan untuk mempertimbangkan jika aksesibilitas adalah kekhawatiran.
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
border: 0;
}
It's worth menunjukkan bahwa kelas ini saat ini digunakan di Bootstrap 3.
Jika anda're tertarik untuk membaca tentang aksesibilitas:
Jeffrey Zeldman menunjukkan solusi berikut:
.hide-text {
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
Itu harus menjadi sumber daya yang kurang intensif dari -9999px;
Silahkan baca semua tentang hal itu di sini:
http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/
Jangan gunakan { display:none; }
Itu membuat konten yang dapat diakses. Anda ingin pembaca layar untuk melihat konten anda, dan visual style ini dengan mengganti teks dengan gambar (seperti logo). Dengan menggunakan text-indent: -999px;
atau metode yang sama, teks masih ada — tidak hanya secara visual ada. Gunakan display:none
, dan teks yang hilang.
Mengapa don't anda gunakan:
<li><a href="#">bla</a></li>
a {
opacity: 0.0;
font-size: 1px;
}
li {
background-image: url('test.jpg');
}
Jika anda belum't ada span atau elemen div, itu bekerja dengan sempurna untuk link.
Ini sebenarnya adalah sebuah area yang matang untuk diskusi, dengan banyak halus teknik yang tersedia. Adalah penting bahwa anda memilih/mengembangkan teknik yang memenuhi kebutuhan anda seperti: pembaca layar, gambar/css/script pada/off kombinasi, seo, dll.
Berikut ini adalah beberapa sumber yang baik untuk memulai menyusuri jalan standardista pengganti gambar teknik:
http://faq.css-standards.org/Image_Replacement
Coba kode ini untuk mempersingkat dan menyembunyikan teks
.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>
atau untuk menyembunyikan gunakan dalam css class .hidetxt { visibility: hidden; }
Saya don't ingat di mana saya mengambil ini, tetapi telah menggunakan itu berhasil untuk usia.
=hide-text()
font: 0/0 a
text-shadow: none
color: transparent
Saya mixin dalam sass namun anda bisa menggunakannya dengan cara apapun yang anda lihat cocok. Untuk mengukur baik saya biasanya menyimpan .tersembunyi
kelas di suatu tempat di proyek saya untuk melampirkan ke elemen untuk menghindari duplikasi.