Halbtransparente Fläche

[codeslayer]

Wie kann ich es lösen, damit nur die Fläche unterhalb, aber nicht die Bilder halbtransparent sind?

Das ist mit CSS normalerweise nicht möglich. Dir bleiben daher zwei Möglichkeiten, wobei beide nicht ideal sind.

1. Wenn du die genauen Maße der Tabelle kennst (und nur dann!), kannst du folgendes machen: füge dem Markup ein element #after hinzu:

<table class="table_small_images">
   ...
</table>
<div class="after">

dein css sieht dann so aus:

.table_small_images {
   background:none;
   margin-left:[linker abstand, wenn angegeben];
   width:[die breite der tabelle, muss angegeben werden];
   height:[die höhe der tabelle, muss angegeben werden];
   position:relative; z-index:1000;
}
.after {
   background:#000000;
   opacity:0.6; -moz-opacity:0.6; filter:alpha(opacity=60);
   margin-left:20px;
   width:[die breite der tabelle von oben];
   height:[die höhe der tabelle von oben];
   top:-[die höhe der tabelle von oben (minus beachten!!)];
   position:relative; z-index:0;
}

was in eckigen klammern steht musst du dabei ausfüllen. der links-abstand ist optional, muss aber, wenn er existiert, bei beiden elementen angegeben werden.

2. möglichkeit (ungetestet): nimm das bildbearbeitungsprogramm deiner wahl und mach eine halbtransparente 24-bit-png-grafik (in der hintergrundfarbe deiner wahl, also in diesem fall schwarz). diese fügst du dann als hintergrundgrafik ein:

.table_small_images {
   background-image:url(opacity-60.png);
}

Das funktioniert allerdings nicht im IE. falls du auf IE-Unterstützung bestehst, geht das nur mit javascript. erstelle dazu eine datei png-fix.js in dem ordner der html-datei. in diese fügst du den unten stehenden inhalt ein. dann fügst du im html-head diese zeilen hinzu:

<!--[if lt IE 7]>
   <script src="png-fix.js" type="text/javascript"></script>
<![endif]-->

hier der inhalt der png-fix.js:

// Global PNG transparency fix for Internet Explorer up to version 6 - Combined by Fotis Evangelou, http://www.webpr.gr/joomla

// The inline PNG fix, courtesy of Bob Osola, http://homepage.ntlworld.com/bobosola/
function correctPNG()
   {
   for(var i=0; i<document.images.length; i++)
      {
     var img = document.images[i]
     var imgName = img.src.toUpperCase()
     if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
        {
       var imgID = (img.id) ? "id='" + img.id + "' " : ""
       var imgClass = (img.className) ? "class='" + img.className + "' " : ""
       var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
       var imgStyle = "display:inline-block;" + img.style.cssText
       if (img.align == "left") imgStyle = "float:left;" + imgStyle
       if (img.align == "right") imgStyle = "float:right;" + imgStyle
       if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
       var strNewHTML = "<span " + imgID + imgClass + imgTitle
       + " style="" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
        + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
       + "(src='" + img.src + "', sizingMethod='scale');"></span>"
       img.outerHTML = strNewHTML
       i = i-1
        }
      }
   }
window.attachEvent("onload", correctPNG);

// The background PNG fix, courtesy of Youngpup (http://www.youngpup.net) and Drew McLellan (http://www.allinthehead.com)
if (navigator.platform == "Win32" && navigator.appName == "Microsoft Internet Explorer" && window.attachEvent) {
   window.attachEvent("onload", alphaBackgrounds);
}

function alphaBackgrounds(){
   var rslt = navigator.appVersion.match(/MSIE (\d+.\d+)/, '');
   var itsAllGood = (rslt != null && Number(rslt[1]) >= 5.5);
   for (i=0; i<document.all.length; i++){
      var bg = document.all[i].currentStyle.backgroundImage;
      if (itsAllGood && bg){
         if (bg.match(/.png/i) != null){
            var mypng = bg.substring(5,bg.length-2);
            document.all[i].style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+mypng+"', sizingMethod='scale')";
            document.all[i].style.backgroundImage = "url('/mambots/system/bot_ultimatepngfix/x.gif')";
         }
      }
   }
}

Nach Möglichkeit verzichte lieber auf die Transparenz, wenn es nicht anders geht