| 

.NET C# Java Javascript Exception

3
Ich habe 2 Divs mit der Größe von ca. 200 * 200 px. Dazu hat meine Seite hat ein eigenes Hintergrundbild. Ich möchte nun in den DIVs ein weiteres Bild einbinden, dass nur in den DIVs zu sehen ist (sozusagen das normale Hintergrundbild überblenden) . Allerdings soll der Seitenhintergrund nach wie vor "durchscheinen". Es soll also mindestens 2 fast gleiche Bilder geben, die sich überlappen. Gibt es eine Möglichkeit, einem DIV einen Hintergrund zuzuweisen, der zudem transparent ist?
20.01.2012
kosmoe
kosmoe
11 ● 2
Was für ein Format haben denn überhaupt Deine Grafiken? Haben die eine entsprechende Transparenz?
– Xantiva 20.01.2012
3 Antworten
3
Bitte: Transparente Hintergründe mit CSS (crossbrowser)
20.01.2012
Jaksa
Jaksa
4,0k ● 2 ● 8
1
Schwierige aber möglich:

<style>
BODY{
  background:url('bild1.png');
}
.child{
  position:absolute;
  top:30px;
  left:30px;
  width:300px;
  height:300px;
  border:solid 1px #f0f;
}
.childBackground{
  opacity: 0.5;
  -moz-opacity: 0.5;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; 
  filter:alpha(opacity=50);
  height:100%;
  width:100%;
  background:url('bild2.png');
}

.childContent{
  position:absolute;
  top:0;
  left:0;
}
</style>

<body>  
  <div class="child">  
    <div class="childBackground"></div>  
    <div class="childContent">Child-Container ohne Transparenz</div> 
  </div>
</body>


Demo: http://jsfiddle.net/kzcZM/
20.01.2012
Floyd
Floyd
14,6k ● 3 ● 9
0
Das kommt auf den Browser an.

Z.B. kennt PNG alpha-Kanäle. das sind Transparenz-Angaben für jeden Pixel eines Bildes zwischen 0 (nicht sichtbar) und 255 (voll sichtbar) (gif kennt nur 0 oder 255).
IE konnte lange nichts damit anfangen (es gibt einen IE-PNG hack für ältere Versionen, der macht die Sache aber nicht gerade schnell und stabil -> Bei vielen DIVs solltest Du die Finger davon lassen *g*)

Mit Farben geht's über rgba(r, g, b, alpha)-Angaben (in älteren IE's mit filter: alpha(opacity = 0..100);)
20.01.2012
WolfgangKluge
WolfgangKluge
1,0k ● 2 ● 7

Stelle deine Web-Frage jetzt!