Sembunyikan teks menggunakan css

Saya memiliki tag di html saya seperti ini:

<h1>My Website Title Here</h1>

Menggunakan css saya ingin mengganti teks dengan logo saya yang sebenarnya. Saya punya logo tidak ada masalah dengan mengubah ukuran tag dan menempatkan gambar latar belakang melalui css. Namun, saya tidak tahu bagaimana cara menghilangkan teks. Saya telah melihatnya dilakukan sebelumnya pada dasarnya dengan mendorong teks dari layar. Masalahnya adalah saya tidak ingat di mana saya melihatnya.

Ini 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 adalah cara lain untuk menyembunyikan teks sambil menghindari kotak 9999 piksel besar yang akan dibuat oleh browser:

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

Mengapa tidak menggunakan saja:

h1 { color: transparent; }

Tambahkan saja font-size: 0;ke elemen Anda yang berisi teks.

.hidden { font-size: 0; }

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

Cara paling ramah lintas browser adalah menulis HTML sebagai

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

lalu gunakan CSS untuk menyembunyikan rentang dan ganti gambar

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

Jika Anda dapat menggunakan CSS2, maka ada beberapa cara yang lebih baik menggunakan contentproperti, tetapi sayangnya web belum 100% ada.

Menyembunyikan teks dengan aksesibilitas dalam pikiran:

Selain jawaban lain, berikut ini adalah pendekatan lain yang berguna untuk menyembunyikan teks.

Metode ini secara efektif menyembunyikan teks, namun membuatnya tetap terlihat oleh pembaca layar. Ini adalah opsi untuk dipertimbangkan jika aksesibilitas menjadi perhatian.

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

Patut ditunjukkan bahwa kelas ini saat ini digunakan dalam Bootstrap 3 .

Jika Anda tertarik membaca tentang aksesibilitas:

• Inisiatif Aksesibilitas Web (WAI)

• Dokumentasi Aksesibilitas MDN

Jeffrey Zeldman menyarankan solusi berikut:

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

Itu harus kurang intensif sumber daya daripada -9999px;

Silakan baca semuanya di sini:

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

Lihat mezzoblue untuk ringkasan yang bagus dari setiap teknik, dengan kekuatan dan kelemahan, ditambah contoh html dan css.

Begitu banyak solusi yang rumit.

Yang paling mudah adalah dengan menggunakan:

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

Anda cukup menyembunyikan teks Anda dengan menambahkan atribut ini:

font size: 0 !important;

Jangan gunakan { display:none; }Ini membuat konten tidak bisa diakses. Anda ingin pembaca layar melihat konten Anda, dan gaya secara visual dengan mengganti teks dengan gambar (seperti logo). Dengan menggunakan text-indent: -999px;atau metode serupa, teksnya masih ada - tidak ada secara visual di sana. Gunakan display:none, dan teksnya hilang.

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

Di atas berfungsi dengan baik di Thunderbird terbaru juga.

Anda dapat menggunakan background-imageproperti css dan z-indexuntuk memastikan gambar tetap di depan teks.

Mengapa Anda tidak menggunakan:

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

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

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

Jika Anda tidak memiliki elemen span atau div, itu berfungsi dengan baik untuk tautan.

Jawabannya adalah membuat rentang dengan properti

{display:none;}

Anda dapat menemukan contoh di situs ini

Ini sebenarnya area yang matang untuk diskusi, dengan banyak teknik halus yang tersedia. Adalah penting bahwa Anda memilih / mengembangkan teknik yang memenuhi kebutuhan Anda termasuk: pembaca layar, kombinasi gambar / css / scripting on / off, seo, dll.

Berikut adalah beberapa sumber yang bagus untuk memulai teknik penggantian gambar standardista:

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

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

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

Gunakan Tag kondisi untuk browser yang berbeda dan gunakan css yang harus Anda tempatkan height:0pxdan width:0pxjuga Anda harus menempatkan font-size:0px.

Jika intinya hanya untuk membuat teks di dalam elemen tidak terlihat, atur atribut warna untuk memiliki 0 opacity menggunakan nilai rgba seperti color:rgba(0,0,0,0);bersih dan sederhana.

Saya tidak ingat di mana saya mengambil ini, tetapi telah menggunakannya dengan sukses sejak lama.

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

Mixin saya dalam sass namun Anda dapat menggunakannya dengan cara apa pun yang Anda inginkan. Untuk ukuran yang baik, saya biasanya menjaga .hiddenkelas di suatu tempat di proyek saya untuk melampirkan elemen untuk menghindari duplikasi.

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

}

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 penggunaan di kelas css Anda .hidetxt { visibility: hidden; }

isi ulang konten dengan CSS

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

Saya biasanya menggunakan:

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

Jika kita bisa mengedit markup, hidup bisa lebih mudah, cukup hapus teks dan berbahagialah. Tapi kadang-kadang markup ditempatkan dengan kode JS atau kita hanya tidak diizinkan untuk mengeditnya sama sekali, css yang sangat buruk berubah menjadi satu-satunya senjata yang ditempatkan di tangan kita.

Kami tidak dapat menempatkan <span>pembungkus teks dan menyembunyikan seluruh tag. Omong-omong, beberapa browser tidak hanya menyembunyikan elemen dengan display:nonetetapi juga menonaktifkan komponen di dalamnya.

Keduanya font-size:0pxdan color:transparentmungkin solusi yang baik, tetapi beberapa browser tidak memahaminya. Kita tidak bisa mengandalkan mereka.

Saya menyarankan:

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

Menggunakan overflow:hiddenmemberlakukan lebar & tinggi kami. Beberapa browser (tidak akan menamai mereka ... IE ) dapat membaca lebar dan tinggi sebagai min-widthdan min-height. Saya ingin mencegah kotak diperbesar.

Menggunakan nilai nol untuk font-sizedan line-heightdalam elemen melakukan trik untuk saya:

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

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

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

Untuk menyembunyikan teks dari html, gunakan properti teks-indent di css

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

/ * untuk teks dinamis Anda perlu menambahkan spasi, sehingga css yang Anda terapkan tidak akan mengganggu. nowrap berarti teks tidak akan pernah membungkus ke baris berikutnya, teks berlanjut pada baris yang sama sampai <br>tag ditemukan

Salah satu cara saya mencapai ini adalah dengan menggunakan :beforeatau :after. Saya telah menggunakan pendekatan ini selama beberapa tahun, dan khususnya bekerja sangat baik dengan ikon vektor mesin terbang.

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

Ini bekerja untuk saya dengan rentang (validasi sistem gugur).

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

Solusi yang bekerja untuk saya:

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

Jawaban terbaik berfungsi untuk teks pendek, tetapi jika teksnya dibungkus, itu akan muncul di gambar.

Salah satu cara untuk melakukannya adalah menangkap kesalahan dengan penangan jquery. Cobalah memuat gambar, jika gagal maka akan muncul kesalahan.

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

Lihat KODE SAMPEL

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