イメージが存在しないときにCSSを使ってaltテキストを隠すには？

Question

すべてのブラウザでCSSを使用してaltテキストを非表示にすることはできますか？

私はcolor:transparentを試しましたが、IE以外のすべてのブラウザで動作しています。

CSSを使用してIEで行うことはできますか。助けを前にありがとう。

Answer 1

color:transparent;の代わりにdisplay:none;を使用してください。

しかし、はこのテクニックを使用しないでください。 @Quentinとして

はコメントで述べている：テキストは人間のために十分ではありません

場合、それが検索エンジンには十分ではありません。

altテキストは非表示にしないでください。 Googleはこれを知っているのはSEO目的にのみ使用され、何も重要ではなく、そのようなことに対して罰金を科す。あなたはGoogle検索エンジンでブラックリストに載っているかもしれません。

だから、単にSEOの目的のためにそれらを使用しないでください。

Answer 2

使用

HTML

<img src="images/test.jpg" alt="alternative"> 

CSS

img{ 
    text-indent:-9999px 
} 

Demo

Answer 3

を使用することができますおよびdisplay: none。

fiddle link

HTML

<h1 class="technique-four"> 
    <a href="#"> 
    <img src="images/header-image.jpg" alt="CSS-Tricks" /> 
    </a> 
</h1> 

CSS：

h1.technique-four { 
    width: 350px; height: 75px; 
    background: url("images/header-image.jpg"); 
    text-indent: -9999px; 
    display: none; 
} 

Answer 4

kellum方法：

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

ここで説明したように：replacing-the-9999px-hack-new-image-replacement

Answer 5

は、これが働いた：

transparentはあまりにも私のために動作しませんでした。

ます。また、noneに表示プロパティを設定する onerrorコールバックを使用することができ

Answer 6

：

<img src="images/test.txt" onerror="this.style.display='none';">