Css kullanarak metni gizleme

Benim html böyle bir etiket var:

<h1>My Website Title Here</h1>

Css kullanarak metni gerçek logomla değiştirmek istiyorum. Ben logo yeniden boyutlandırma ve css üzerinden bir arka plan görüntüsü koyarak hiçbir sorun var. Ancak, metinden nasıl kurtulacağımı anlayamıyorum. Daha önce metni ekrandan dışarı iterek yapıldığını gördüm. Sorun şu ki, nerede gördüğümü hatırlayamıyorum.

Bu bir yol:

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

İşte başka bir yolu tarayıcı yaratacak bu büyük 9999 piksel kutusunu kaçınırken metni gizlemek için:

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

Neden sadece kullanmıyorsunuz:

h1 { color: transparent; }

Sadece font-size: 0;metin içeren öğenize ekleyin .

.hidden { font-size: 0; }

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

Tarayıcılar arası en kolay yol HTML'yi şu şekilde yazmaktır:

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

sonra aralığı gizlemek ve görüntüyü değiştirmek için CSS kullanın

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

CSS2'yi kullanabiliyorsanız, contentözelliği kullanmanın daha iyi yolları vardır , ancak maalesef web henüz% 100 değildir.

Erişilebilirliği göz önünde bulundurarak metni gizleme:

Diğer cevaplara ek olarak, metni gizlemek için başka bir yararlı yaklaşım.

Bu yöntem metni etkili bir şekilde gizler, ancak ekran okuyucular için görünür kalmasını sağlar. Bu, erişilebilirliğin bir endişe olup olmadığını dikkate almak için bir seçenektir.

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

Bu sınıfın şu anda Bootstrap 3'te kullanıldığını belirtmek gerekir .

Erişilebilirlik hakkında okumak istiyorsanız:

• Web Erişilebilirlik Girişimi (WAI)

• MDN Erişilebilirlik belgeleri

Jeffrey Zeldman aşağıdaki çözümü önermektedir:

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

Kaynak yoğunluğundan daha az -9999px;

Lütfen bununla ilgili her şeyi buradan okuyun:

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

Her tekniğin güçlü ve zayıf yanları ile html ve css gibi güzel bir özet için mezzoblue'ya bakın .

Çok karmaşık çözümler.

En kolay olanı kullanmaktır:

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

bu özelliği ekleyerek metninizi gizleyebilirsiniz:

font size: 0 !important;

Kullanmayın { display:none; }İçeriğe erişilemez hale getirir. Ekran okuyucuların içeriğinizi görmesini ve metni bir resimle (logo gibi) değiştirerek görsel olarak biçimlendirmesini istiyorsunuz. text-indent: -999px;Veya benzer bir yöntem kullanarak , metin hala orada - görsel olarak orada değil. Kullanın display:noneve metin gitti.

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

Yukarıdaki son Thunderbird de iyi çalışıyor.

css background-imageözelliğini z-indexkullanarak ve görüntünün metnin önünde kalmasını sağlamak için kullanabilirsiniz .

Neden kullanmıyorsunuz:

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

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

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

Span veya div öğeniz yoksa, bağlantılar için mükemmel çalışır.

Cevap özelliği ile bir span oluşturmaktır

{display:none;}

Bu sitede bir örnek bulabilirsiniz

Bu aslında tartışmaya açık bir alandır ve birçok ince teknik mevcuttur. Ekran okuyucular, resimler / css / komut dosyası açma / kapama kombinasyonları, seo vb. Gibi ihtiyaçlarınızı karşılayan bir teknik seçmeniz / geliştirmeniz önemlidir.

Standardista görüntü değiştirme tekniklerinin yolunda başlamak için bazı iyi kaynaklar:

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

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

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

Farklı tarayıcı için Koşul etiketini kullanın ve css kullanarak yerleştirmeniz height:0pxve width:0pxayrıca yerleştirmeniz gerekir font-size:0px.

Nokta, öğenin içindeki metni görünmez yapmaksa, color:rgba(0,0,0,0);temiz ve basit gibi bir rgba değeri kullanarak renk niteliğini 0 opaklığa sahip olacak şekilde ayarlayın .

Bunu nereden aldığımı hatırlamıyorum ama yıllardır başarıyla kullanıyorum.

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

Benim mixin sass olduğunu ancak uygun gördüğünüz herhangi bir şekilde kullanabilirsiniz. İyi bir önlem olarak, .hiddençoğaltmayı önlemek için öğelere eklemek için genellikle projemin bir yerinde bir sınıf tutarım .

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

}

Metni kısaltmak ve gizlemek için bu kodu deneyin

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

veya css sınıfınızdaki kullanımı gizlemek için .hidetxt { visibility: hidden; }

içeriği CSS ile yeniden doldurma

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

Genellikle kullanıyorum:

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

İşaretlemeyi düzenleyebilirsek, hayat daha kolay olabilir, sadece metni kaldırın ve mutlu olun. Ancak bazen işaretleme JS kodu ile yerleştirildi veya sadece düzenlememize izin verilmiyor, çok kötü css elimizdeki tek silah oldu.

Biz koyamaz <span>saran metni ve bütün etiketini gizler. Bu arada, bazı tarayıcılar yalnızca içindeki öğeleri gizlemekle display:nonekalmaz , aynı zamanda içindeki bileşenleri de devre dışı bırakır.

Her ikisi de font-size:0pxve color:transparentiyi çözümler olabilir, ancak bazı tarayıcılar bunları anlamıyor. Onlara güvenemeyiz.

Öneririm:

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

Kullanımı overflow:hiddengenişliğimizi ve yüksekliğimizi zorlar. Bazı tarayıcılar (onlara isim vermeyecektir ... IE ) genişliği ve yüksekliği min-widthve olarak okuyabilir min-height. Kutunun büyütülmesini önlemek istiyorum.

Eleman için font-sizeve line-heightiçinde sıfır değeri kullanmak benim için hile yapar:

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

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

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

HTML'den metni gizlemek için css'de text-indent özelliğini kullanın

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

/ * dinamik metin için beyaz boşluk eklemeniz gerekir, böylece uyguladığınız css rahatsız etmeyecektir. nowrap, metnin hiçbir zaman bir sonraki satıra sarılmayacağı anlamına gelir, bir <br>etiketle karşılaşılana kadar metin aynı satırda devam eder

Bunu başarmanın yollarından biri :beforeveya kullanmaktır :after. Bu yaklaşımı birkaç yıldır kullanıyorum ve özellikle glif vektör simgeleriyle harika çalışıyor.

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

Bu benim için span (nakavt validasyonu) ile çalıştı.

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

Benim için çalışan bir çözüm:

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

En iyi yanıt kısa metin için geçerlidir, ancak metin sarılırsa görüntüde görünür.

Bunu yapmanın bir yolu, bir jquery işleyicisi ile hataları yakalamaktır. Bir görüntüyü yüklemeyi deneyin, başarısız olursa bir hata atar.

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

ÖRNEK KOD'a bakın

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