2016-11-07 6 views
0

Ich habe eine Webseite mit einer Box und möchte eine Textbeschriftung über den Rand der Box legen, und die Grenze darunter ausblenden. Im Moment habe ich es so mache:Maskierung mit CSS

http://www.esims.nl/test/aspnet/2016_11_stackoverflow/

Ich frage mich, ob es eine bessere Art und Weise ist, wie Maskierung oder so etwas. Da ich verschiedene divs mit Hintergrundbildern anstelle von CSS3 verwende.

Update: Das Fieldset schien genau das zu sein, wonach ich gefragt habe, aber leider funktioniert es nicht gut in IE11 mit abgerundeten Grenzen. Wenn niemand eine gute Lösung dafür kennt, kann ich das Feld nicht verwenden und fahre mit meiner eigenen Lookset-ähnlichen Lösung fort (das obige Beispiel).

+0

so was ist die erwartete ... können Sie sich darüber klar werden – Geeky

+0

Bitte fügen Sie Ihr Markup hinzu und css auch – Geeky

+0

Das erwartete Ergebnis ist das Beispiel, das ich bereits gab. Aber ich frage mich, ob ich es mit CSS3 border-radius, weniger div's und weniger Hintergrundbildern machen kann. – esims

Antwort

3

Es ist einfach, es ist ein HTML-Tag für das genannte Fieldset

<div class="wrapper"> 
    <fieldset> 
    <legend>Label of the box:</legend> 
    Content 
    </fieldset> 
</div> 

Sie mehr darüber hier lesen:

http://www.w3schools.com/tags/tag_fieldset.asp

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset

+0

Ich wusste nicht über das fieldset. Leider funktioniert es nicht gut in IE11 mit abgerundeten Grenzen. Ich habe einige 'Lösungen' dafür gesehen, zum Beispiel [hier] (http://stackoverflow.com/questions/940191/rounded-corners-on-a-fieldset/17406564#17406564), aber sie verstecken die Grenze nicht unter der Legende, oder verstecken Sie die Grenze mit einem durchgehenden weißen Hintergrund, der für ein Hintergrundbild nicht geeignet ist, wie das oben angegebene Beispiel. – esims