我怎樣才能使 <legend> 透明？

Question

我似乎無法使<legend>元素的背景透明。 參見此jsFiddle： http : //jsfiddle.net/hWZa6/ （已在Chrome和Firefox中測試）

我試圖實現的效果實際上是將<legend>元素移動到包含<frameset>元素的頂部邊框下方，但是我沒有做任何事情使頂部邊框完整。 無論我嘗試使用透明度還是位置，它總是缺少圖例的位置： 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添加position:relative fieldset以便您可以四處移動。

Answer 3

嘗試此操作，僅隱藏字段集邊框，然后將元素包裝在帶有邊框的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的解決方案將起作用，盡管它需要添加包裝器元素。