Daily Code Poem #25

News
Tools
Bücher
Fotos
Impressum
Be social!
Finden

Wenn ich Transparenz mit CSS erstelle habe ich immer dasselbe Problem. Entwede ist das gesamte Element durchsichtig oder nicht. Ich will aber, dass der Hintergrund durchsichtig ist und der Text normal lesbar bleibt. Was kann ich da machen?

Du musst dazu zwei div-Tags in HTML verschachteln.

^?View Code HTML

<!-- container two starts -->
<div id="layMain">
  <div class="layTrans"></div>
  <div class="layInhalt">
    <h1>&uuml;ber schrift f&uumlR den Inhalt</h1>
    <p>Lorem ipsum dolor sit amet, 
      consectetuer adipiscing elit. 
      Quisque molestie.</p>
  </div>
</div>

Nun müssen wir nur noch die Stile im CSS richtig definieren:

^?View Code CSS

#layMain {
  position: relative;
  float: left;
  margin-left: 20px;
  padding: 30px;
  width: 200px;
  overflow:hidden;
  color: white;
}
#layMain .layTrans {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 240px;
  height: 500px;
  opacity: 0.5;
  filter: alpha(opacity=50);
  -moz-opacity: 0.5;
  background-color: black;
  z-index: -1;
}
.content {
  position:relative;
}

Daily Code Poem #25 wurde am 28. 6. 2010 um etwa 11 Uhr gepostet und am 25. 6. 2010 um etwa 11 Uhr geändert.
Design wären noch interessante Themen.
Dies könnte Dich auch interessieren: Code Poem, CSS, Transparenz.
Bis jetzt haben zwei Personen diesen Post kommentiert. Schreib auch Du einen Kommentar.

Weitere Posts zu diesem Thema

Den Titel eines Posts mit einem Band hinterlegen [Code Poem #7]

Ich hätte als Titel gerne ein Band über einem Hintergrund, so wie es auf dem Bild aussieht: Dies geht eigentlich ganz einfach mit den neuen Techniken [...]
Daily Code Poem #3

Wie kriege ich typographische Anführungszeichen mit CSS hin? ... blockquote { position: relative; text-indent: 2em; width: 200px; color: #999; } .bsta [...]
Text mit CSS3 rotieren

Ich finde jetzt immer mehr Techniken um mit CSS3 und HTML (bis vor kurzem HTML 5) zu arbeiten. Immer mehr Browser untersützen jetzt die neuen Versione [...]
Ein CSS-StyleSheet zum Anfang

Es fällt mir immer wieder auf, dass manche Designer auf grundlegende CSS-Definition vergessen. Am öftesten wird das zurücksetzen der vom jeweiligen Br [...]
Ein wenig Dynamik mit Scriptaculous

Imm wieder kriege ich die Frage, wie man als Startseite Bilder, Puzzleteile ode ähnliches in einer Zeile anzeigt und dann links/rechts scrollen kann. [...]

Der Guru 2.0 Blog lebt von Deinem Kommentar

Es existieren 1 Antworten zu diesem Post

nesQuick von [web]
schrieb am 28. 6. 2010 um etwa 11 Uhr:oder aber rgba() nutzen :) Aber das geht nur bei CSS3, also den coolen, browsern :)

Es gibt bereits einen TrackBack zu diesem Post

TrackBack von Tweets that mention Durchsichtiger Hintergrund aber normaler Text mit CSS #CSS #HTML -- Topsy.com am 28. 6. 2010 um etwa 12 Uhr[...] This post was mentioned on Twitter by DJ Hennion, Renato Gloyer. Renato Gloyer said: Durchsichtiger Hintergrund aber normaler Text mit CSS http://bit.ly/cfYlUO #CSS #HTML [...]