如果div在上面，则隐藏边框

Question

我有一个带边框的<div id="content">。在此div之上是另一个<div id="header">，其中包含一些文字。我想在边框上显示文字，但我不想显示它。

为了便于解释，我在这里发布了我的源代码：http://jsfiddle.net/4HSEn/这就是我想要实现的目标：

文字将是动态的，背景将是渐变的。所以图像不是解决方案。

我知道如何使用fieldset和legend标记实现这一目标，但我正在寻找带有div或任何其他标记的解决方案。

在这里找到了一些内容：Is it possible to achieve a <fieldset>-like effect without using the <fieldset> tag?但legend使用的是背景色：#FFF，这对我没什么帮助：/

Answer 1

未经考验的理论，但也许你可以给#header提供与身体背景相同的渐变背景，然后使用相对于身体的X和Y位置偏移＃header的背景位置（使用js）？

基本上我建议采用一种掩蔽效果。

编辑：将#content替换为body，更符合OP的当前代码示例。

Answer 2

为什么不通过将顶部位置设置为负值来推动内容格式：

<div id="header" style="background-color: blue;">Demo</div> <div id="content" style="top: -15px; border: 1px solid white"></div>

Answer 3

将您的文字包含在<span style="background-color: blue;">或类似内容中。这应该有用。