Wie Hintergrundfarbe auf <hr> Tag festlegen?

-2

Warum wird das hr Tag-Element nicht wie unten codiert auf grün gesetzt?Wie Hintergrundfarbe auf <hr> Tag festlegen?

hr { 
 
    background-color: #00ff00; 
 
}

<hr>

Quelle

2017-01-31 cssfan

Haben Sie diese Frage gelesen: http://stackoverflow.com/questions/6382023/changing-the-color-of-a-hr-element? –

Mögliches Duplikat von [Ändern der Farbe eines hr-Elements] (http://stackoverflow.com/questions/6382023/changing-the-color-of-a-hr-element) – Josh

Josh scheint korrekt zu sein.Das Schwarz, das Sie mit einem Standard "hr" sehen, ist sein Rahmen, nicht sein Hintergrund, Sie müssen 'border-color' einstellen. Nur wenn Sie Ihrem "hr" eine height -Eigenschaft geben, wird der Hintergrund sichtbar und erfordert die Einstellung von "background-color" –

Der Code, den Sie zur Verfügung gestellt wird richtig die Hintergrundfarbe gesetzt. Das Tag <hr> hat jedoch keinen sichtbaren Hintergrund, sodass es scheinbar nichts zu tun hat. Was Sie wahrscheinlich stattdessen wollen, ist seine Farbe ändern:

hr { 
    color: #00ff00; 
}

dass die <hr> Linie grün machen.

Wenn nicht, gibt es wahrscheinlich ein anderes Element mit mehr specificity. In diesem Fall haben Sie eine Reihe von Optionen:

1) Fügen Sie dem hr Selektor mehr Spezifität hinzu.

2) Stellen Sie die Farbe als !important:

hr { 
    color: #00ff00 !important; 
}

3) Stellen Sie die Hintergrundfarbe inline:

<hr color="#00ff00" />

hoffe, das hilft!

Quelle

2017-01-31 01:55:04

Die Hintergrundfarbe stellt nur Hintergrund für Stunden dar, indem wir den Inline-Stil anwenden, den wir einfacher machen können. https://jsbin.com/wuvolojuzu/

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>JS Bin</title> 
 
</head> 
 
<body> 
 
    <p>Hello</p> 
 
    <hr color="red" width="100%" /> 
 
    <p>Hi</p> 
 
</body> 
 
</html>

Quelle

2017-01-31 06:06:03 Ranjith

Normalerweise können Sie nicht background-color für hr Tag gesetzt. Dies ist ein leeres Element. Es muss Start-Tag haben, darf aber kein End-Tag haben. hr Akzeptieren Sie nur color Eigentum. Zum Beispiel:

<hr color="#00ff00" />

Standard hr Wert:

margin: 7px or 8px /*depend on box-modeling. */ 
border: 1px inset #000; 
display: block; 
/* No height */

Standard-Einsatz:

margin-top: 10px; /* You can change margin height */ 
margin-bottom: 10px; /* You can change margin height */ 
border: 0; /* or border-top: 5px solid #00ff00 */ 
border-width: 5px 0 0 0; 
border-style: solid; 
border-color: #00ff00;

hr{ 
 
    margin-top: 15px; 
 
    margin-bottom: 15px; 
 
    border: 0; 
 
    border-top: 5px solid #00ff00; 
 
}

<html> 
 
    <body> 
 
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> 
 
    <hr /> 
 
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> 
 
    </body> 
 
</html>

Ich hoffe, das hilft.

Quelle

2017-01-31 06:45:40 Rahul

Wie Hintergrundfarbe auf <hr> Tag festlegen?

Antwort

Verwandte Themen