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

CSS 能做的只有这么多。

.wrapper {
  color: transparent;
}

我想如果你真的想的话，你可以弄乱字体大小和系列，但这只是一团糟。

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

从语义上讲，您的代码不正确。您正在内联元素（跨度）内插入一个内联块元素（内联行为作为一个块）。您可以使用以下标记并使其变得容易：

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

然后轻松隐藏跨度。:)