保持文本宽度和高度，但“隐藏”它

Question

有人知道如何在背景上隐藏文字（使用渐变）但保持其高度和宽度？ 可见性：隐藏在我的span-Tag似乎无法正常工作。它应该保留一个内联元素。

编辑：

<div><span>whatever</span><img src="whatever.jpg"/></div>

Answer 1

使用内联块。

http://caniuse.com/#search=inline-block

HTML：

<div>
    <span>Foo bar boo baz</span>
</div>

CSS：

div
{
    background: red;
}

div span
{
    display: inline-block;
    visibility: hidden;
}

Answer 2

在代码中使用另一个嵌套<span>标记。内部标记是在外部保持定位时隐藏的内部标记。

EX：

<span id="outer">
  <span id="inner">
    <!-- whatever you want -->
  </span>
</span>

然后你的风格可能看起来像这样：

#outer {
  width: xxx;
  height: xxx;
  /*any other attributes */
}
#inner {
  display: inline; /*this is what would change to hidden*/
}

希望这有帮助！