Hintergrund Transparent

[veNom]

Hi,

ich habe da ein Design entwickelt ohne mal über das Technische dahinter nachzudenken und naja jetzt bin ich aber soweit das ich darüber nachdenke.

Das ist das Design.

Das Problem ist der Menü und Content Hintergrund sollen Transparent sein.
Der Content soll verlängerbar sein deshalb kommt eine fixe Höhe nicht in Frage.
Ich weiß das man per CSS Transparenz setzen kann, das funktioniert allerdings nur im FF im IE nicht.

Gibt es eine Javascript Lösung hierfür?

[Basti]

Hm... schwierig, wobei ich erstmal versuchen würde auf JavaScript zu verzichten.

Vielleicht könntest du ein wenig tricksen und den gesamten Hintergrund des Contents bis unten an den Rand als Grafik abspeichern und dann als Hintergrundbild verwenden. Ist der Content kürzer, so wird der restliche Teil abgeschnitten, ansonsten nicht.
Für alles was dann länger als deine bisherige Grafik ist wäre dann ein sich wiederholender Hintergrund sinnvoll.

Das ganze wird aber trotzdem nicht leicht werden, zumal die Hintergrundgrafik unter Umständen relativ groß wird.
Vielleicht hat ja noch jemand andere Ideen.

[veNom]

Ich habe etwas gefunden gestern über Google wo auch bereits mit IE6 Durchsichtig war allerdings bin ich mir gerade nicht sicher ob der IE da mit Garfiken ausgetrickst wurde, was ich nicht machen kann.

Ansonsten muss ich das alles etwas ändern und eine Endlosschleife im Hintergrund und viele Div's überreinander verschachteln.

[Ingo]

Hi.
Lösungen, soweit ich sie finden konnte, nutzen entweder
a) transparente png24-bilder (was mit dem IE6 nicht geht)
oder
b) Konstrukte, wo man 2 Divs übereindander stapelt, von denen das erste den Hintergrund
darstellt und opacity nutzt, während das zweite absolut darüber positioniert ist und den
Vordergrund darstellt. Hierbei muss das zweite Div aus dem normalen Textfluss herausgenommen
sein (z.B. mit position:absolute) und/oder außerhalb des ersten Div stehen, weil es sonst die
opacity des ersten Divs erbt (ohne die Möglichkeit, diese Eigenschaft mit weniger Transparenz zu
überschreiben).
Vllt. geht aber trotzdem sowas wie

Code: Alles auswählen

CSS:

#menuback { filter:alpha(opacity=50);   /* IE */
            -moz-opacity:0.50;          /* Mozilla/Firefox  */
            opacity:0.50;               /* CSS3 */
            background:white;
          }
#menuback a { text-decoration:none; color:black; }

HTML:

<div id="menuback">
  <a href="#">Hallo, Welt!</a>
</div>



Die Schrift ist zwar nur fast schwarz, aber wenn die opacity 0.30 oder mehr beträgt,
ist sie vllt. immer noch gut zu lesen. - Sauber ist das nicht, aber zur Not

Gruß, Ingo

PS: Falls das totaler Schwachsinn ist, bitte beachten: ich verdaue gerade eine Flasche Dornfelder ... gn8!

[Avedo]

Eine beliebte, aber nicht wirklich perfekte Methode zur Darstellung von Teiltransparenten Hintergründen ist die Erstellung von teiltransparenten GIFs. Kannste mir GIMP, Photoshop o.ä. machen.
MfG, Andy

[veNom]

Dank macping das klappt wunderbar das werde ich wohl einsetzen

[veNom]

Jaaaaa da bin ich wieder in dem thread wo ich dachte ich kehre nicht mehr zurück ... Aber was solls.

Es ist soooo!!! (das ich es bald schmeisse.. ne spass)

Wenn ich einen Layer transparenz zuweise bezieht sich das einfach auf alles, text sowie auch den Hintergrund.
Erst dachte ich mir, OK, machste halt nen zweiten Layer in dem wo der Text steht, OK gesagt getan.

- Positionert Schrift, Größe, etc eingestellt -

Browser auf... Wo ist mein f**** Text?
- Mal alles markieren... hmm is ja eh da!
-> Vielleicht liegt er im hintergrund?!
-> z-index Überall hinzufügen
-> Geht nicht -> Googeln!!!

1 Tag später finde ich etwas über transparenz wo der super satz steht.
Das der wenn der layer mit dem text IN DEM layer wo die transparenz gesetzt ist liegt, sich auch der text und hintergrund, etc auch transparent wird. Mein Parent Layer gibt diese Infos also an alle weiteren Div-layer weiter.

Soviel zu meiner Story, das Menü habe ich dann fix positioniert, dachte mir passt geht alles machste fertig, Script rein und fertisch biste (arbeit von 2 tagen !NORRMAAAAL! ... 2 Wochen mitlerweile ... gut ich geb zu ich bin schon etwas faul...)

Mein prob ist nun der COntent auch dieser hat einen Transparenten BG, wie aber soll ich den Hintergrund an die Textlänge anpassen oder das diese ineinander liegen?

Edit: habs jetzt Online
http://www.venom-media.at/jobs/kopnet/

[veNom]

Sry aber ich find keine akzeptable Lösung?
Keiner denn eine Idee, in Javascript umsetzbar mit dem Transparentern Hitergrund oder ähnliches?

Bitte keine PNG lösungen, das funktionietr im IE6 nicht.

[Ingo]

Hoi.
Vllt. könnte man das ähnlich machen wie in den Menüs: 2 separate Divs, eines für
den transparenten Hintergrund, das andere für den Vordergrund. Der content-Teil
sieht dann so aus:

Code: Alles auswählen

CSS:

  #contentbg { ... genauso wie das bisherige #content, nur umbenannt ...  }
  #contenttext
  {
    position: absolute;
    top: 288px; left:250px;  /* Position wie #contentbg */
    width:530px;
    color:white;
    z-index:10;   /* nötig? */
  }

HTML:

  <div id="contentbg"></div>
  <div id="contenttext">
    ...
    AAA BBB CCC <br />
    AAA BBB CCC <br />
    ...      
  </div>


Bleibt noch die Sache mit der Höhe des Content-Hintergrundes; ein Script könnte
so aussehen - wir nutzen die "offsetHeight":

Code: Alles auswählen

  function setContentBgLength()
  {
    var contentLength = document.getElementById('contenttext').offsetHeight;

    document.getElementById('contentbg').style.height = contentLength + 'px';
  }


Aufgerufen wird das Script z.B. im body-Tag <body onload="setContentBgLength()">.
Für den Fall, dass JavaScript nicht läuft, sollte man dann vllt. die height des #contentbg
auf einen genügend großen Wert voreinstellen, so dass der Hintergrund im Zweifel eher
zu lang als zu kurz ist.

Gruß, Ingo

[veNom]

DANKEE!!!!!!!!!!!! macping ist der beste