css - 独自のタグではなく、同じ親タグの画像ではないテキストを非表示にする

Question

私は次のHTMLを持っています:

<span class="wrapper">
  <img src="..." />
  Some text!
</span>

テキストに独自のタグがない場合、画像ではなくテキストを非表示にするにはどうすればよいですか?

Answer 1

おそらく相対的な位置：

<span class="wrapper">
    <img src="http://www.placehold.it/100" />
  Some text!
</span>


.wrapper {
    position: relative;
    left: -9999px;
}

.wrapper img {
    position: relative;
    left: 9999px;
}

デモ

Answer 2

意味的に、あなたのコードは適切ではありません。インライン要素（スパン）内にインラインブロック要素（ブロックとして動作するインライン）を挿入しています。次のマークアップを使用して、簡単にすることができます。

<p>
  <img src=""/>
  <span></span>
</p>

そして、スパンを簡単に非表示にします。:)

Answer 3

text-indentテキストを非表示にするために使用してみてください

 .wrapper {
      text-indent:-5000px;
    }

またはspanテキストであり、一意classであり、display:none

html

<span class="wrapper">
  <img src="..." />
  <span>Some text!</span>
</span>

CSS

.wrapper span {
display:none;
}

Answer 4

CSS でできることは限られています。

.wrapper {
  color: transparent;
}

本当にしたいのであれば、フォントサイズとファミリーをいじることができると思いますが、それはただ面倒です。