CSS: Hintergrundfarbe nur innerhalb des Randes

Lesezeit: 3 Minuten

Ich habe nach einer Antwort gesucht, konnte sie aber nirgendwo finden. Meine Frage ist einigermaßen einfach: Ich habe eine Hintergrundfarbe von meinem Körper, dann einen großen Rand, und jetzt möchte ich eine andere Hintergrundfarbe Innerhalb der Abstand.

Wie mache ich das mit CSS?

  • Sie nur Hintergrund haben innerhalb des Randes. Box-Modell: w3.org/TR/CSS2/box.html

    – c69

    6. April 2012 um 20:22 Uhr

  • Wenn Sie anstelle eines Rands eine Füllung verwenden, hat es die Hintergrundfarbe, die Sie für das Element ausgewählt haben

    – bevacqua

    6. April 2012 um 20:32 Uhr

Benutzer-Avatar
Erik Funkenbusch

Wenn Ihr Rand auf den Körper eingestellt ist, sollte das Festlegen der Hintergrundfarbe des HTML-Tags den Randbereich färben

html { background-color: black; }
body { margin:50px; background-color: white; }

http://jsfiddle.net/m3zzb/

Oder legen Sie als dmackerman-Vorschlag einen Rand von 0 fest, aber einen Rand in der Größe, die Sie für den Rand haben möchten, und legen Sie die Randfarbe fest

  • oder setze a div #main_container innerhalb der body dasselbe zu tun

    – Dylan Valade

    6. April 2012 um 20:36 Uhr

  • Wenn Ihre Hintergrundfarbe auf dem HTML-Tag eine andere Farbe als Weiß ist, nimmt die Farbe beim ersten Laden der Seite für eine Sekunde die gesamte Seite ein, bevor die Farbe des Körpers einsetzt, sodass es irgendwie seltsam aussieht.

    – frostig

    24. Juli 2015 um 18:24 Uhr

  • @AlexF – Outlook-E-Mails sind kein Standard-HTML, Sie sind in Ihren Möglichkeiten extrem eingeschränkt.

    – Erik Funkenbusch

    25. August 2018 um 3:14 Uhr

Könnten Sie anstelle eines Rands einen Rand verwenden? Das solltest du mit machen <div>ohnehin.

Etwas wie das?Geben Sie hier die Bildbeschreibung ein

http://jsfiddle.net/GBTHv/

  • Hallo, ich habe etwas Ähnliches gemacht, aber die Hintergrundfarbe innerhalb des Rahmens erstreckt sich nur bis zum unteren Rand des Textes innerhalb des Randes. Ich brauche es im gesamten Randbereich … wenn das Sinn macht.

    Benutzer1318194

    6. April 2012 um 20:28 Uhr

  • @ user1318194 – Ich glaube, Sie sind verwirrt darüber, was Marge bedeutet. Der Rand ist der Bereich um das Element herum, also ist ein Rand wie oben genau das, was der Rand ist.

    – Erik Funkenbusch

    6. April 2012 um 20:34 Uhr

  • Ja, aber mit Rändern können Sie es prozentual festlegen – Grenzen können Sie nicht. Wenn Sie also links und rechts einen Rand von 1 % wünschen, können Sie das mit Rändern nicht tun.

    – frostig

    24. Juli 2015 um 18:23 Uhr

  • Wenn die Farbe transparent ist, vermischt sich die Rahmenfarbe mit der Hintergrundfarbe.

    – Alex78191

    14. Juli um 11:22 Uhr

Ich brauchte etwas Ähnliches und kam auf die Verwendung der Pseudoklassen :before (oder :after):

#mydiv {
   background-color: #fbb;
   margin-top: 100px;
   position: relative;
}
#mydiv:before {
   content: "";
   background-color: #bfb;
   top: -100px;
   height: 100px;
   width: 100%;
   position: absolute;
}

JSFiddle

Das ist aufgrund des Box-Modells nicht möglich. Sie könnten jedoch eine Problemumgehung mit dem Rahmenbild von css3 oder der Rahmenfarbe im allgemeinen CSS verwenden.

Ich bin mir jedoch nicht sicher, ob Sie möglicherweise ein Problem mit dem Zurücksetzen haben. Einige Browser setzen auch einen Rand zu HTML. Siehe Eric Meyers Reset CSS für mehr!

html{margin:0;padding:0;}

Möchten Sie möglicherweise die Randfarbe außerhalb der Grenze ändern? Vielleicht https://www.w3schools.com/css/css_outline.asp[outline][1] Gliederung hilft? Im Speziellen

outline-color: green;

  • Oder box-shadow stackoverflow.com/a/18841365/4854931

    – Alex78191

    14. Juli um 11:38 Uhr

  • Oder box-shadow stackoverflow.com/a/18841365/4854931

    – Alex78191

    14. Juli um 11:38 Uhr

1282960cookie-checkCSS: Hintergrundfarbe nur innerhalb des Randes

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy