Warum kann ich die Deckkraft von h1 Element nicht wieder auf 1 ändern, nachdem ich die Deckkraft von html Element auf 0.5 geändert habe?

Ich habe ein Hintergrundbild zu meinem HTML-Element in CSS hinzugefügt, so dass es mit der Größe des Webbrowsers erweitert wird. Ich habe die Deckkraft in diesem HTML-Element auf 0,5 geändert. Ich möchte die untergeordneten Elemente (insbesondere h1 und Absatzelemente) wieder auf eine Deckkraft von 1 ändern, damit der Text nicht transparent ist. Es funktioniert nicht. Bitte helfen :)Warum kann ich die Deckkraft von h1 Element nicht wieder auf 1 ändern, nachdem ich die Deckkraft von html Element auf 0.5 geändert habe?

HTML:

<!DOCTYPE html> 
<html> 
<head> 
    <title>Title</title> 
    <link rel = "stylesheet" href = "style.css"> 
</head> 

<body> 

    <p id ="topBar"></p> 

    <h1>Heading</h1> 

    <h3>Name</h3> 

    <p> 
     Paragraph 
    </p> 

    <h3>Heading</h3> 

    <p>More text</p> 

    <h3>Send us an email!</h3> 

    <form> 
     <input style ="width:200px" type="email" placeholder ="Email" name="email"><br><br> 
     <textarea style ="height:100px;width:200px"placeholder = "Message" name="message"></textarea><br><br> 
     <input type="submit" value ="Send" name="send"> 
    </form> 

    <p id ="bottomBar"></p> 
</body> 
</html>

CSS:

html { 

background: url(pen.jpg) no-repeat center fixed; 
background-size: cover; 


font-family: Garamond; 
text-align: center; 

opacity: 0.5; 

} 

h1 { 

opacity: 1; 
}

Quelle

2016-08-01 koz

@LaurIvan Nein. Die h1-Regel ist spezifischer als die html-Regel, daher gilt sie. – JJJ

Das gesamte HTML-Dokument hat eine Opazitäts-Direktive, es beeinflusst alles unabhängig von Spezifität oder Priorität. @LaurIvan hinzufügen!Wichtig ist nichts. Sie müssen die untere Deckkraft nur für bestimmte Elemente festlegen. –

@SLowLoris aber wie? h1 ist innerhalb von html verschachtelt, daher sollten gemäß css priority die Regeln von h1 Vorrang haben vor html – geeksal

, wenn Sie die Opazität der Eltern 0.5 alle Kind-Elemente gesetzt werden, dass die Opazität erhalten. Ich schlage vor, dass Sie stattdessen ein transparentes IMG als Hintergrund verwenden ODER Sie könnten diesen Hintergrund einem Pseudo-Element geben.

(i verwendet Hintergrundfarbe für die Zwecke Beispiel, aber Sie können background-image und opacity:0.5 stattdessen verwenden. Es funktioniert immer noch das gleiche)

html { 
 

 

 

 

 
font-family: Garamond; 
 
text-align: center; 
 

 

 
position:relative; 
 

 

 
} 
 
html:before { 
 
    height:100%; 
 
    width:100%; 
 
    position:absolute; 
 
    top:0; 
 
    left:0; 
 
    margin:0 auto; 
 
    background:rgba(0,0,0,0.5); 
 
    
 
    content:""; 
 
    z-index:-1; 
 
} 
 

 
h1 { 
 

 
opacity: 1; 
 
}

<p id ="topBar"></p> 
 

 
    <h1>Heading</h1> 
 

 
    <h3>Name</h3> 
 

 
    <p> 
 
     Paragraph 
 
    </p> 
 

 
    <h3>Heading</h3> 
 

 
    <p>More text</p> 
 

 
    <h3>Send us an email!</h3> 
 

 
    <form> 
 
     <input style ="width:200px" type="email" placeholder ="Email" name="email"><br><br> 
 
     <textarea style ="height:100px;width:200px"placeholder = "Message" name="message"></textarea><br><br> 
 
     <input type="submit" value ="Send" name="send"> 
 
    </form> 
 

 
    <p id ="bottomBar"></p>

Quelle

2016-08-01 09:18:06

, um noch weiter zu klären: Einstellung der Deckkraft auf 0,5 auf einem Elternteil div und 0,4 auf einen Absatz innerhalb dieser div wird zu einer Opazität von 0,5 * 0,4 = 0,2 auf dem Kind Absatz . –

-1

Opazität funktioniert nicht in diesem speziellen Fall, weil es erbt von seinem Elternteil und kann nicht überschrieben werden.

Ich habe Ihren Hintergrund von background: rgba(0, 0, 0, .5); geändert und dann muss die Opazität des Textes nicht mehr geändert werden.

Dies ist die einfachste Art, es zu ändern, nur mit der Deckkraft des Hintergrunds.

JS fiddle here

html { 
 

 
background: url(pen.jpg) no-repeat center fixed; 
 
background-size: cover; 
 

 

 
font-family: Garamond; 
 
text-align: center; 
 

 
background: rgba(0, 0, 0, .5); 
 

 
}

<body> 
 

 
    <p id ="topBar"></p> 
 

 
    <h1>Heading</h1> 
 

 
    <h3>Name</h3> 
 

 
    <p> 
 
     Paragraph 
 
    </p> 
 

 
    <h3>Heading</h3> 
 

 
    <p>More text</p> 
 

 
    <h3>Send us an email!</h3> 
 

 
    <form> 
 
     <input style ="width:200px" type="email" placeholder ="Email" name="email"><br><br> 
 
     <textarea style ="height:100px;width:200px"placeholder = "Message" name="message"></textarea><br><br> 
 
     <input type="submit" value ="Send" name="send"> 
 
    </form> 
 

 
    <p id ="bottomBar"></p> 
 
</body>

Quelle

2016-08-01 09:21:10 Relisora

standardmäßig, wenn die Mutter Opazität auf sie angewendet hat dann alle untergeordneten Elemente nehmen auch die gleiche Opazität. Selbst wenn Sie die untergeordneten Elemente als Deckkraft definieren: 1 wird es nicht funktionieren.

In Ihrem Fall hat 'html' eine Deckkraft: 0,5, so dass sein Kind, das 'h1' mit Deckkraft: 1, immer noch eine Deckkraft von 0,5 hat.

Für Ihr Problem gibt es 2 Lösungen: -
1. Machen Sie das Hintergrundbild, z. B. "pen.jpg" leicht transparent durch eine Fotobearbeitungssoftware wie Photoshop.
2. Verwenden Sie das Hintergrundbild in 'nach' Pseudocode. d.h.

html::after { 
     content: ""; 
     background: url(pen.jpg); 
     opacity:0.5; 
     top: 0; 
     left: 0; 
     bottom: 0; 
     right: 0; 
     position: absolute; 
     z-index: -1; 
}

Irgendeiner der oben genannten wird für Sie arbeiten.

Quelle

2016-08-01 09:23:15

War meine Antwort nicht korrekt? Warum die negative Stimme? –

Downvote ist nicht von mir, aber ich denke, es war aufgrund dieses Satzes: 'In Ihrem Fall hat 'html' Opazität: 0,5, so dass sein Kind ie 'h1' mit Opazität: 1 wird keinen Unterschied machen." Aber tatsächlich, wenn Sie haben ein Opacity 0.5 Element innerhalb eines anderen Opacity 0.5 Elements, der Effekt ist 0.25 Opacity, also gibt es einen Unterschied. Vielleicht könnten Sie diesen Satz bearbeiten ... – gregn3

Danke @ gregn3. Ich habe meinen Satz bearbeitet. –

Sie können auch Hintergrund auf Körperelement anstelle von HTML anwenden. weil alle sichtbaren Inhalt ist innen im Körper tag

body{ 
 
background:rgba(255,0,0,0.5); 
 

 

 
font-family: Garamond; 
 
text-align: center; 
 

 
opacity: 0.5; 
 

 
} 
 
h1 { 
 

 
opacity: 1; 
 
}

<p id ="topBar"></p> 
 

 
    <h1>Heading</h1> 
 

 
    <h3>Name</h3> 
 

 
    <p> 
 
     Paragraph 
 
    </p> 
 

 
    <h3>Heading</h3> 
 
    
 
    <p>More text</p> 
 

 
    <h3>Send us an email!</h3> 
 

 
    <form> 
 
     <input style ="width:200px" type="email" placeholder ="Email" name="email"><br><br> 
 
     <textarea style ="height:100px;width:200px"placeholder = "Message" name="message"></textarea><br><br> 
 
     <input type="submit" value ="Send" name="send"> 
 
    </form> 
 

 
    <p id ="bottomBar"></p>

Quelle

2016-08-01 09:28:15 geeksal

Warum kann ich die Deckkraft von h1 Element nicht wieder auf 1 ändern, nachdem ich die Deckkraft von html Element auf 0.5 geändert habe?

Antwort

Verwandte Themen