CSS Transparenz machen den text transparent

bonus Requisiten, wer kann herausfinden, warum das nicht funktioniert. für einige Grund, meinen text ", dh Inhalt, Menü, Fußzeile" erbt, die Deckkraft und sitzt nicht bei 1 Deckkraft und vollständig einsehbar.

Ich habe es auf beide werden eine Klasse und eine ID als ich haben beide Wege ausprobiert, und bin ziemlich Anfänger mit CSS eigentlich

<style type="text/css">
div#page {
  border:0px solid purple;
  width:700px;
  margin:0 auto;
  padding:5px;
  text-align:left;
  background-image:url('images/layout.jpg');
}
div {
  text-align:center;
}
div#header {
  border:2px solid red;
  width:695px;
  height:30px;
}
div#mostpop {
  border:2px solid black;
  width:195px;
  float:Right;
  margin:10px 0px 10px 5px;
  height:245px;
  background-color:#ffffff;
  opacity:0.7;
  filter:alpha(opacity=60); /* For IE8 and earlier */
}
div#recent {
  border:2px solid black;
  width:195px;
  float:Right;
  margin:10px 0px 10px 0px;
  height:245px;
  position: relative;
  left: 204px;
  top: 255px;
  background-color:#ffffff;
  opacity:0.7;
  filter:alpha(opacity=60); /* For IE8 and earlier */
}
div#content {
  border:2px solid black;
  width:495px;
  margin:10px 0 10px 0px;
  min-height:500px;
  background-color:#ffffff;
  opacity:0.7;
  filter:alpha(opacity=60); /* For IE8 and earlier */
}
div#footer {
  border:2px solid black;
  width:695px;
  height:30px;
  background-color:#ffffff;
  opacity:0.7;
  filter:alpha(opacity=60); /* For IE8 and earlier */
div.recent p
  {
  margin:30px 40px;
  font-weight:bold;
  color:#000000;
  opacity:1;
}
div.content p
  {
  margin:30px 40px;
  font-weight:bold;
  color:#000000;
  opacity:1;
}
div.mostpop p
  {
  margin:30px 40px;
  font-weight:bold;
  color:#000000;
  opacity:1;
}
div.footer p
  {
  margin:30px 40px;
  font-weight:bold;
  color:#000000;
  opacity:1;
}
div.header p
  {
  margin:30px 40px;
  font-weight:bold;
  color:#000000;
  opacity:1;
}
</style>
<div id="page">
 <!--<div id="header">Header</div>-->
 <div class="mostpop" id="mostpop"><p>Menu</p></div>
 <div class="recent" id="recent"><p>Menu</p></div>
 <div class="content" id="content"><p>Content</p></div>
  • Verwenden RGBA statt robertnyman.com/2010/01/11/...
  • bist du mit IE?
  • Sie können nicht erhöhen die Lichtundurchlässigkeit von einem Kind-element einen Wert, der größer ist, als es die Eltern.
InformationsquelleAutor NRGdallas | 2012-06-08
  1. 5

    Deckkraft sollte immer von seinem übergeordneten Element Erben. Wenn Sie ein div mit 50% Deckkraft, und dann legen Sie einige Inhalte in den div-50% als gut, dann ist die resultierende innere div wird mit 25% insgesamt, ich bin mir nicht ganz sicher, aber ich glaube nicht, dass es möglich ist, werden die child-Elemente WENIGER transparent als Ihre Eltern.

    Wenn Sie wollen einfach nur die div, um einen transparenten hintergrund haben, dann brauchen Sie nicht zu verwenden Deckkraft an alle, die Sie verwenden können background: rgba(255, 255, 255, 0.5); für halb transparent weiß, während der text im Vordergrund Farbe intakt. Es gibt auch workarounds für ältere Versionen von IE für diese als gut, aber es sollte funktionieren gut für ie9.

    • Dank einer Tonne, scheint ein wenig albern, man kann nicht ein Kind-element weniger transparent, dann ein element, aber das funktioniert einwandfrei!
    • Es mag albern, aber es gibt gute Gründe, es zu tun auf diese Weise. Stellen Sie sich vor Sie haben ein element mit vielen Kindern oder mit unterschiedlichen Folien und Sie möchten, zu verblassen, das gesamte element aus. Derzeit ist Sie nur für die Transparenz, um das übergeordnete element und es funktioniert. Wenn das nicht Auswirkungen auf die Kinder, die fade-Effekt wäre ein monster zu behandeln.
    InformationsquelleAutor Matthew
  2. 1

    CSS Deckkraft ist ein bisschen wackelig - wenn Sie eine bestimmte Deckkraft auf ein element, werden alle Kinder dieses Elements sind gezwungen, zu vermuten, mindestens die gleiche Deckkraft. Sie können nicht umgehen mit dem Kind Stil überschreibt.

    Den standard-workaround ist das erstellen von zwei Elementen, und positionieren Sie das zweite absolut 'over', die erste mit einem z-index. Das untere element wird Ihre partielle Transparenz, die höhere bekommt man Ihre undurchsichtige Stil.

    <div style="position: relative">
   <div id="transparency" style="position: absolute; top: 0; left: 0">... transparent stuff here </div>
   <div id="regular_content" style="position: absolute; top:0;left:0;z-index:1">...</div>
</div>
    InformationsquelleAutor Marc B
Schreibe einen Kommentar