Question

我似乎无法获得＆lt; legend＆gt;的背景元素是透明的。请参阅此jsFiddle：http://jsfiddle.net/hWZa6/（在Chrome和Firefox中测试）

我想要实现的效果实际上是移动＆lt; legend＆gt;包含＆lt; frameset＆gt;的顶部边框下方的元素元素，但我没有做任何事情使顶部边框完整。无论我是尝试使用透明度还是位置，它总是会忽略图例所在线的位置： http://cl.ly/image/1W043h0I3f0A/Edit%20this%20Fiddle%20-%20jsFiddle.jpg

如何制作传说中的边框区域，完成？

Answer 1

您可以将其放在屏幕上，

position:absolute; left:-999em;

或者您最喜欢的与屏幕阅读器兼容的偏移技术。（也许研究样板的图像替换样式）

Answer 2

您可以将position:absolute添加到legend。（可选）将position:relative添加到fieldset，以便您可以移动。

Answer 3

试试这个，只需隐藏fieldset边框并将元素包装在带边框的div中。 http://jsfiddle.net/hWZa6/15/

<div id="wrapper">
  <fieldset>
    <legend>Test</legend>
    The top border is never fully visible, despite the legend being set <code>visibility: hidden</code>.
    <div id="A">
        <div id="B">Upon applying <code>visibility: hidden</code> this div becomes transparent, and the red div behind it is fully visible.</div>
    </div>        
  </fieldset>
</div>

fieldset { border: none; }
#wrapper { border: 1px solid black; }
legend { display: block }
#A { background-color: red; width: 300px; height: 150px; padding: 10px;}
#B { background-color: blue; width: 400px; height: 100px;}

Answer 4

将此CSS用于legend元素。

legend { margin-left: -9999px; }

Answer 5

如果您不想，或无法更改HTML，并且您不需要显示图例文字，则可以关闭显示。

legend { display: none; }

如果您确实可以控制HTML，那么@ user1289347的解决方案可行，但需要添加包装元素。

如何在<legend>透明背后隐藏背景？</legend>

5 个答案: