HTML, CSS; Wie Farbe zu verhindern, durch Übereinander divs glänzenden

Lassen Sie uns sagen, dass ich den folgenden Code haben:HTML, CSS; Wie Farbe zu verhindern, durch Übereinander divs glänzenden

<html> 
<head> 
<style> 
html { 
    background-color:rgba(53, 135, 65, 0.80); 
} 
div { 
    background-color:rgba(9, 7, 7, 0.23); 
} 
</style> 
</head> 
<body> 
<div> 
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
</div> 
</body> 
</html>

Der Text div hat einen dunkelgrünen Hintergrundfarbe, obwohl die Hintergrundfarbe ist grau. Sie können dies überprüfen, indem Sie die Hintergrundfarbe von html entfernen.

Es ist, weil die grüne Farbe durch das graue div scheint. Gibt es eine Möglichkeit, den Text zu "sagen" div nehmen Sie background-color:rgba(53, 135, 65, 0.80);, aber verwenden Sie Weiß als Hintergrundfarbe?

Quelle

2017-06-27 David

Wenn Sie 'Hintergrundfarbe ändern: rgba (9, 7, 7, 0,23);' auf 'Hintergrund -color: rgba (255, 255, 255, 0.23); 'Ist das das Ergebnis, nach dem du suchst? – TripleDeal

Wenn ich das richtig verstehe, sollte das folgende Farbe haben: rgba (53, 135, 65, 0.80); Hintergrundfarbe: #fffff; – omer

Fügen Sie einen weißen Hintergrund div über grau Div. –

Antwort auf Ihr zweites Problem

<html> 
<head> 
<style> 
body { 
    background-color:rgba(53, 135, 65, 0.80); 
} 
div { 
    color:rgba(53, 135, 65, 0.80); 
    background-color:white; 

} 
</style> 
</head> 
<body> 
<div> 
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
</div> 
</body> 
</html>

Quelle

2017-06-27 11:47:59

Ich lese '" Gibt es eine Möglichkeit zu sagen "der Text div Hintergrundfarbe: rgba (53, 135, 65, 0,80); aber Weiß als Hintergrundfarbe verwenden?" So sollte die weiße Hintergrundfarbe angewendet werden das div-Tag anstelle des body-Tags – TripleDeal

wenn ich das richtig verstehen, wird es tun (die div Hintergrund-Farbe weiß und die div Textfarbe sein rgba (9, 7, um 7, 0,23);)

https://jsfiddle.net/Lsjo988z/4/

html:

<div> 
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
</div>

CSS:

html { 
    background-color:rgba(53, 135, 65, 0.80); 
} 
div { 
    background-color:#fff; 
    color:rgba(9, 7, 7, 0.23); 
}

Quelle

2017-06-27 11:50:12 omer

Ok, also wenn ich Ihre Frage richtig verstanden, dann sollten Sie dies versuchen und sehen, ob das, was Sie suchen.

<html> 
 
<head> 
 
    <style> 
 
    body { 
 
     background-color:rgba(53, 135, 65, 0.80); 
 
    } 
 
    div { 
 
     color:rgba(53, 135, 65, 0.80); 
 
     background: linear-gradient(rgba(53, 135, 65, 0.80), rgba(53, 135, 65, 0.80)), 
 
       linear-gradient(white, white); 
 
    } 
 
    </style> 
 
</head> 
 
<body> 
 
    <div> 
 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
    </div> 
 
</body> 
 
</html>

Nur das Hintergrundelement wird in Ihren Code hinzugefügt, so dass die Farbe des Textes immer noch die gleiche, aber es kann geändert werden, wenn Sie wollen.

Hier ist das Ding:

sagte Sie die folgende

Es ist, weil die grüne Farbe durch die graue div scheint. Gibt es eine Möglichkeit, den Text div sagen "Hintergrundfarbe" sagen: rgba (53, 135, 65, 0.80); aber Weiß als Hintergrundfarbe verwenden?

Das hat mich denken Sie zwei Hintergrundfarben als 2 verschiedenen Schichten haben wollen, ein grün (rgba (53, 135, 65, 0,80) und das andere ist weiß.

Ist dies nicht, was Sie meinten, bitte geben Sie uns weitere Informationen (vielleicht sollten Sie das gewünschte Ergebnis zeichnen)

Quelle

2017-06-27 12:07:12 TripleDeal

Wenn ich Ihre Frage richtig lese, möchten Sie nicht die Textfarbe ändern, wie die anderen Antworten vorschlagen , aber verhindern Sie, dass das Grün durch Ihr transparentes div scheint, während Sie noch den Alpha-Wert nutzen, um eine hellere Farbe zu erzeugen ed und verwenden eine opake Farbe, die das gleiche Endziel erreicht. Oder Sie könnten einen Wrapper div verwenden, um zu erreichen, was Sie wollten.

Wenn Sie das transparente div mit einem anderen Wrapper div umhüllen und das Ziel so einstellen, dass es einen weißen Hintergrund hat, stoppt es das Durchbluten des Grüns.Sie müssen die Eigenschaft display auf inline-block setzen, um die untergeordneten Elemente zu verkleinern.

html { 
 
    background-color: rgba(53, 135, 65, 0.80);; 
 
} 
 

 
#wrapper { 
 
    display: inline-block; 
 
    background-color: white; 
 
} 
 

 
#inner { 
 
    background-color: rgba(9, 7, 7, 0.23); 
 
}

<div id="wrapper"> 
 
    <div id="inner"> 
 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
    </div> 
 
</div>

Quelle

2017-06-27 12:12:28 kamoroso94

Versuchen Sie, diese

html { 
 
    background-color:rgba(53, 135, 65, 0.80); 
 
} 
 
div { 
 
    background-color:rgba(9, 7, 7, 0.23); 
 
}

<div style="background-color:white;"> 
 
<div> 
 
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
</div> 
 
</div>

Quelle

2017-06-27 13:25:34

HTML, CSS; Wie Farbe zu verhindern, durch Übereinander divs glänzenden

Antwort

Verwandte Themen