HTML opacity problem

[Allmighty™]

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:


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

[~ JWonderpig ~]

img {
    opacity:1;
    filter:alpha(opacity=100); 
}

[Allmighty™]

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

[JustSkillx3]

du musst es in einen eigenen div container setzen

[Shawak]

Für den Hintergrund ganz einfach via rgba die Transparenz setzen:

background-color: rgba(0, 0, 0, .7);

[Allmighty™]

Originally Posted by JustSkillx3

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.

Originally Posted by Shawak

Für den Hintergrund ganz einfach via rgba die Transparenz setzen:

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

[M4xicaner]

Öhm... Eigentlich sollte das mit rgba(0, 0, 0, .5) funktionieren:



Edit: Bild einbinden will nicht...

[Allmighty™]

Ja, nur wenn man schreibt

background-color:rgba(0, 0, 0, .7);

dann wird der Code

background-image:url(...);

anscheinend überschrieben und somit wird das Hintergrundbild nicht mehr angezeigt

[~ JWonderpig ~]

Originally Posted by Allmighty™

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

[Shawak]

Originally Posted by Allmighty™

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.

[Allmighty™]

Originally Posted by Shawak

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