HTML opacity problem

05/11/2014 16:51 Allmighty™#1
Hey, ich hab in der Schule ein Projekt als Hausaufgabe aufbekommen, in dem ich verschiedene vorgegebene Fotos selber machen muss und diese per Lightbox in eine Website (via HTML :P) einbauen muss. Das ist ja nicht das Problem.

So sieht die Website aus:
[Only registered and activated users can see links. Click Here To Register...]

Den "Info"-Bereich, sprich der Bereich wo alle Bilder reinkommen und wo schon einige drinnen sind, habe ich mit background-color die Farbe schwarz gegeben und die Opacity auf 0.7 gesetzt, damit man den Hintergrund ein bisschen durchsieht und es so cooler aussieht. Nun gut, ich dachte mir, hey das sieht ja ganz cool aus, doch dann zoome ich ein bisschen ran, und sehe, dass die Opacity der Bilder logischerweise auch auf 0.7 gesetzt wurde, da die sich im Info-Bereich befinden, und man kann durch diese jetzt hindurchsehen. Das möchte ich vermeiden.

Ich wäre euch sehr dankbar, wenn ihr mir Tipps geben könntet, wie ich das machen könnte.
mfG Almighty
05/11/2014 16:55 ~ JWonderpig ~#2
HTML Code:
img {
    opacity:1;
    filter:alpha(opacity=100); 
}
05/11/2014 17:03 Allmighty™#3
HTML Code:
img.table_content {
	border:white solid 1px;
	opacity:1;
	filter:alpha(opacity=100); 
}
Danke für deine Antwort, leider hat es noch nicht geholfen.
Aber: Dreamweaver zeigt mir bei der Autovervollständigung den Parameter "filter" gar nicht an. Bist du dir sicher, dass es den in dieser Schreibweise gibt? Kann auch an meiner Dummheit liegen ;)
05/11/2014 17:16 JustSkillx3#4
du musst es in einen eigenen div container setzen
05/11/2014 17:32 Shawak#5
Für den Hintergrund ganz einfach via rgba die Transparenz setzen:

Code:
background-color: rgba(0, 0, 0, .7);
05/11/2014 18:14 Allmighty™#6
Quote:
Originally Posted by JustSkillx3 View Post
du musst es in einen eigenen div container setzen
Aber was bringt mir das? Dieser div hat dann wieder die opacity von 1 und somit sieht man den Hintergrund wieder nicht.
Oder meinst du jedes einzelne Bild in ein div? Das würde aber auch nichts bringen.


Quote:
Originally Posted by Shawak View Post
Für den Hintergrund ganz einfach via rgba die Transparenz setzen:

Code:
background-color: rgba(0, 0, 0, .7);
Wenn ich das so mache, ist nicht mehr mein Bild der Hintergrund, sondern so ein Grauton, wegen der Opacity 0.7 (0 wäre weiß, 1 schwarz).

Ich will aber, dass man meinen Hintergrund durch die dunkle Infobox sieht, jedoch sollten die kleinen Bilder/Thumbnails nicht mit dem Wert 0.7 durchsichtig sein :)
05/11/2014 19:25 M4xicaner#7
Öhm... Eigentlich sollte das mit rgba(0, 0, 0, .5) funktionieren:

[Only registered and activated users can see links. Click Here To Register...]

Edit: Bild einbinden will nicht...
05/11/2014 19:55 Allmighty™#8
Ja, nur wenn man schreibt
HTML Code:
background-color:rgba(0, 0, 0, .7);
dann wird der Code
HTML Code:
background-image:url(...);
anscheinend überschrieben und somit wird das Hintergrundbild nicht mehr angezeigt :p
05/11/2014 21:59 ~ JWonderpig ~#9
Quote:
Originally Posted by Allmighty™ View Post
HTML Code:
img.table_content {
	border:white solid 1px;
	opacity:1;
	filter:alpha(opacity=100); 
}
Danke für deine Antwort, leider hat es noch nicht geholfen.
Aber: Dreamweaver zeigt mir bei der Autovervollständigung den Parameter "filter" gar nicht an. Bist du dir sicher, dass es den in dieser Schreibweise gibt? Kann auch an meiner Dummheit liegen ;)
hast du es in Css richtig zugewiesen?
filter ist für den scheißplorer ;)
05/12/2014 15:52 Shawak#10
Quote:
Originally Posted by Allmighty™ View Post
sprich der Bereich wo alle Bilder reinkommen und wo schon einige drinnen sind, habe ich mit background-color die Farbe schwarz gegeben und die Opacity auf 0.7 gesetzt, damit man den Hintergrund ein bisschen durchsieht und es so cooler aussieht
Diesem div musst du das rgba Attribut zuordnen und nicht dem Element mit dem Hintergrundbild.
05/12/2014 19:19 Allmighty™#11
Quote:
Originally Posted by Shawak View Post
Diesem div musst du das rgba Attribut zuordnen und nicht dem Element mit dem Hintergrundbild.
Ich danke dir so sehr!! Du warst mein Retter in der Not :P Nun funktioniert alles.
Natürlich auch ein Danke an alle anderen, die mir geholfen bzw. zu helfen versuchten :)