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

时间:2012-08-17 18:13:02

标签: html css

我似乎无法获得&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

如何制作传说中的边框区域,完成?

5 个答案:

答案 0 :(得分:1)

您可以将其放在屏幕上,

position:absolute; left:-999em;

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

答案 1 :(得分:1)

您可以将position:absolute添加到legend。 (可选)将position:relative添加到fieldset,以便您可以移动。

答案 2 :(得分:1)

试试这个,只需隐藏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;}​

答案 3 :(得分:1)

将此CSS用于legend元素。

legend { margin-left: -9999px; }

答案 4 :(得分:-1)

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

legend { display: none; }

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