Halbtransparente Fläche
0 0 0 0 0 
Gernot Back
0 
MudGuard
0 
Jonathan
0
Halbtransparente Fläche
Hallo Leute!
Habe ein kleines Problem.
Ich habe eine Tabelle die auf einem Bild platziert ist. Diese Tabelle hat eine halbtransparente Fläche, damit man das Bild im Hintergrund sieht. Auf diese halbtransparente Fläche kommen ein paar Bilder drauf.
Nun mein Problem, diese Bilder die auf der halbtransparenten Fläche sind, werden auch halbtransparent dargestellt.
Wie kann ich es lösen, damit nur die Fläche unterhalb, aber nicht die Bilder halbtransparent sind?
Mein Code:
.table_small_images {
background-color:#000000;
filter:alpha(opacity=60);
-moz-opacity: 0.6;
opacity: 0.6;
}
<table cellspacing="0" cellpadding="10" class="table_small_images">
<tr>
<td>
<table border="0" cellspacing="0" cellpadding="5">
<tr>
<td><img src="image.jpg" alt=""><img src="image.jpg"></td>
</tr>
</table></td>
</tr>
</table>
-
Hello,
.table_small_images {
background-color:#000000;
filter:alpha(opacity=60);
-moz-opacity: 0.6;
opacity: 0.6;
}ohne es auszuprobieren: Bringe den darin enthaltenen Bildern bei, dass sie nicht transparent sind:
.table_small_images img {
...
}MfG
Rouven--
-------------------
He is entertaining both out of the car and in the car because if you tell him that a corner is almost flat then he is the guy who is going to try to take it flat even if it means shunting it the other side of it, he will come with the data and say 'hey, I may have crashed and destroyed the car, but I was flat-out'. That is an interesting quality that he has! -- Team Member on Jacques Villeneuve-
ohne es auszuprobieren: Bringe den darin enthaltenen Bildern bei, dass sie nicht transparent sind:
.table_small_images img {
...
}Wie mache ich das, das die Bilder nicht transparent sind?
-
Hello,
Wie mache ich das, das die Bilder nicht transparent sind?
na wie hast du es denn gemacht, dass die Fläche transparent ist? Mach halt für die Bilder das Gegenteil!
MfG
Rouven--
-------------------
Vegetarier essen meinem Essen das Essen weg.-
na wie hast du es denn gemacht, dass die Fläche transparent ist? Mach halt für die Bilder das Gegenteil!
Also wenn ich
.table_small_images img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
mache, dann sind die bilder trotzdem transparent.Ich glaube das funktioniert so nicht!
-
Hallo tempo74,
Also wenn ich
.table_small_images img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
mache, dann sind die bilder trotzdem transparent.Also auf dieser Seite liegt einfach das Bild (der Schriftzug), bei dem ich keine Transparenz wünsche, vom z-Index her eine Etage höher und wird deshalb von dem halbtransparenten Layer nicht überdeckt.
Gruß Gernot
--
super me-
Es gibt noch einen anderen Lösungsansatz für Dein Problem:
Du kannst mit einem Grafikverarbeitungsprogramm einfach ein halbtransparentes PNG machen und es als background-image machen...
Problem ist nur, daß du das nur schwierig dem IE6 und darunter beibringen kannst.
Einen Lösungsansatz dazu findest du hier:
http://visualhype.de/programmierung/transparente-png-grafiken-im-internet-explorer-6/468/Gruß
-
Hallo Max,
Es gibt noch einen anderen Lösungsansatz für Dein Problem:
habe ich ein Problem?
Du kannst mit einem Grafikverarbeitungsprogramm einfach ein halbtransparentes PNG machen und es als background-image machen...
Einen Lösungsansatz dazu findest du hier:
http://visualhype.de/programmierung/transparente-png-grafiken-im-internet-explorer-6/468/Problem ist nur, daß du das nur schwierig dem IE6 und darunter beibringen kannst.
Genau diesen Ansatz habe ich verfolgt und dabei diesen hier vor ein paar Jahren schon einmal vorgestellten mit Schachbretttranzparenz verworfen: Das kann manch einen Rechner in die Knie zwingen und dann flimmert's.
Gruß Gernot
--
super me
-
-
-
-
-
-
Hi,
opacity: 0.6;
ohne es auszuprobieren: Bringe den darin enthaltenen Bildern bei, dass sie nicht transparent sind:Nein, das kann nicht funktionieren. opacity arbeitet anders.
Es wird erst das Element mit allen seinen Nachfahren gemalt, und dann auf dieses Ergebnis der opacity-Wert angewandt.
Alles, was sich also innerhalb des Elements befindet, ist mindestens so durchsichtig wie das Element selbst.Ein teiltransparentes Hintergrundbild (PNG mit Alpha-Channel) wäre hier eine Lösung.
cu,
Andreas--
Warum nennt sich Andreas hier MudGuard?
O o ostern ...
Fachfragen unaufgefordert per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
-
Hallo MudGuard,
Ein teiltransparentes Hintergrundbild (PNG mit Alpha-Channel) wäre hier eine Lösung.
Zukünftig wird wohl auch sowas wie background: rgba(255,0,0,0.5) gehen.
Jonathan
-
-
-
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