CSS Transparenzproblem (opacity)

  • Themenstarter Themenstarter Netzwerkidi
  • Beginndatum Beginndatum
N

Netzwerkidi

Hallo zusammen,

jetzt bin ich hier schon dankenswerterweise fündig geworden in Sachen DIV-Zentrierung, aber die Transparenz bekomme ich einfach nicht hin.

Das zentrierte Bild soll nicht transparent sein, aber immer hakt es in einer Version.
In irgendeiner älteren IE-Version, die mein PSPad nutzt, klappt das in einer Variante, aber dafür bei FF, IE6/7+ und Opera dann nicht oder umgekehrt.

Wer weiß wie es geht, also in allen Browsern die Fläche außerhalb des Bildes transparent?

Besten Dank und Grüße

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>http://www.pmob.co.uk/temp/vertical-align11.htm</title>
<style type="text/css">
* {margin:0;padding:0}
html,body{height:100%}
#wrapper{
	height:100%;
	width:100%;
	display:table;
	vertical-align:middle;
	background-color:white;
	
	
	/*-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";*/ 
   filter:alpha(opacity=50); 
	/*-moz-opacity:0.50;*/
   opacity:0.50;  
  
  
}
#outer{
	display:table-cell;
	vertical-align:middle;
}
#inner{
	position:relative;
	left:50%;
	float:left; 
		
}
#image{
	border:1px solid #000;
	padding:20px 20px;
	position:relative;
	text-align:right;
	left:-50%;
	background-color:white;
}

#image img {
  width:500px;
}


</style>
<!--[if lt IE 8]>
<style type="text/css">
#wrapper{	overflow:hidden;/* stop hoz scroll bar from appearing*/}
#inner {top:50%}
#image{top:-50%;}
</style>
<![endif]-->
</head>

<body style="background-image:url('http://style.tutorials.de/v10/headerlogo.png');">
<div id="wrapper">
	<div id="outer">
		<div id="inner">
			<div id="image">
         <a href="#"><img id="zoomImg" src="http://style.tutorials.de/v10/headerlogo.png" /></a>    
			</div>
		</div>
	</div>
</div>
</body>
</html>
 
Die opacity-/filter:alpha(opacity)-Eigenschaft wird grundsätzlich immer an seine inneren nachfolgenden Kinder-Elemente vererbt.

Lösung in diesem Fall: für #wrapper stattdessen eine semitransparente PNG-Grafik als Hintergrundbild einsetzen.

Siehe Cross-browser semi-transparent backgrounds, um den IE bis einschließlich Version 6 zu bedienen, der transparente PNG-Grafiken nicht darstellen kann.
 
Zuletzt bearbeitet:
So sieht meine Lösung nun aus:

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <title></title>
  
  <style>
  * {color:white}
  #box1 {
    z-index: 1;
    width:100%;
    height:100%;
    top:0;
    left:0;
    text-align:center;
    background-image:url("http://www.abload.de/img/transgray75jpyb.png");
  }
  #bild {
    z-index: 1; 
    width:600px; 
    margin-top:200px;
    margin-left: auto;
    margin-right: auto;
    border:25px solid white;
  }
  #bedienung {
    z-index:1;
    height:50px; 
  }
  </style>
  
  
  </head>
  <body style="background-image:url('http://www.abload.de/img/2011-08-23_1051413r02.png');">     
  <div id="box1">
    <div id="box2">
      <img id="bild" src="http://www.abload.de/img/2011-08-23_1051413r02.png" />
      <div id="bedienung">Bedienung, bitte!!
      </div>
    </div>
  </div>  
</body>
</html>
 
So sieht meine Lösung nun aus:

Code:
  #box1 {
    z-index: 1;
    width:100%;
    height:100%;
    top:0;
    left:0;
    text-align:center;
    background-image:url("http://www.abload.de/img/transgray75jpyb.png");
  }
  #bild {
    z-index: 1; 
    width:600px; 
    margin-top:200px;
    margin-left: auto;
    margin-right: auto;
    border:25px solid white;
  }
  #bedienung {
    z-index:1;
    height:50px; 
  }
Auch wenn's hier keine Auswirkung zu scheinen mag, ohne eine Angabe zur Art der Positionierung (absolute, relative o. fixed) zeigt z-index keine Wirkung! Gleiches gilt im Falle von #box1 für die Positionsangaben top u. left!
 
Du hast recht. Ich habe inzwischen auch ein absolute eingefügt, weil sonst der Rest nicht unter Box und Bild verschwindet. Danke.
 

Neue Beiträge

Zurück