Wie wir hier erkennen macht nun auch der IE mit. Er macht aber den ganzen Container transparent, zu sehen am hover bei den Links. Durch verändern des Wertes für opacity kann noch gesteuert werden inwieweit der Hintergrund durchscheint. Zu beachten ist hier, dass es auf jeden Fall Abweichungen zur Darstellung in den anderen Browsern gibt. Zurück zum Tutorial
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Language" content="de" />
<title>
olaf-bosch.de - Transparente PNG auch im InternetExplorer
</title>
<style type="text/css">
/*<![CDATA[*/
<!--
a:link,a:visited{
background: transparent;
color: #0000FF;
display:block;
text-align : center;
font : bold 110% Arial, Helvetica, sans-serif;
margin:8px;
width:284px;
}
a:hover{
background: #EEEEEE;
color : #0000FF;
}
body{
background:url(body.gif) #CCCC99 fixed;
margin:0;
padding:0;
}
.transparent{
background:url(trans1.png);
height:400px;
margin:50px 0 0 100px;
padding-top:8px;
width:300px;
}
-->
/*]]>*/
</style>
<!--[if lt IE 7]>
<style type="text/css">
.transparent{
filter:Alpha(opacity=80);
}
</style>
<![endif]-->
</head>
<body>
<div class="transparent">
<a href="http://olaf-bosch.de/experimentelles/transparente-png-auch-im-internet-explorer/#demo4">Zurück zum Tutorial</a> <a
href="#">Dummy</a> <a
href="#">Dummy</a> <a
href="#">Dummy</a> <a
href="#">Dummy</a> <a
href="#">Dummy</a> <a
href="#">Dummy</a> <a
href="#">Dummy</a> <a
href="#">Dummy</a>
</div>
</body>
</html>
Zurück zum Tutorial | body.gif | trans1.png
