Register for your free account! | Forgot your password?

Go Back   elitepvpers > Coders Den > Web Development
You last visited: Today at 05:52

  • Please register to post and access all features, it's quick, easy and FREE!

Advertisement



HTML opacity problem

Discussion on HTML opacity problem within the Web Development forum part of the Coders Den category.

Reply
 
Old   #1
 
Allmighty™'s Avatar
 
elite*gold: 108
Join Date: Apr 2012
Posts: 647
Received Thanks: 59
Red face HTML opacity problem

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
Allmighty™ is offline  
Old 05/11/2014, 16:55   #2

 
~ JWonderpig ~'s Avatar
 
elite*gold: 60
Join Date: Sep 2013
Posts: 1,427
Received Thanks: 248
HTML Code:
img {
    opacity:1;
    filter:alpha(opacity=100); 
}
~ JWonderpig ~ is offline  
Old 05/11/2014, 17:03   #3
 
Allmighty™'s Avatar
 
elite*gold: 108
Join Date: Apr 2012
Posts: 647
Received Thanks: 59
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
Allmighty™ is offline  
Old 05/11/2014, 17:16   #4


 
JustSkillx3's Avatar
 
elite*gold: 0
The Black Market: 135/0/0
Join Date: Jun 2011
Posts: 3,044
Received Thanks: 730
du musst es in einen eigenen div container setzen
JustSkillx3 is offline  
Old 05/11/2014, 17:32   #5



 
Shawak's Avatar
 
elite*gold: 0
The Black Market: 259/0/0
Join Date: Apr 2010
Posts: 10,291
Received Thanks: 3,610
Für den Hintergrund ganz einfach via rgba die Transparenz setzen:

Code:
background-color: rgba(0, 0, 0, .7);
Shawak is offline  
Old 05/11/2014, 18:14   #6
 
Allmighty™'s Avatar
 
elite*gold: 108
Join Date: Apr 2012
Posts: 647
Received Thanks: 59
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
Allmighty™ is offline  
Old 05/11/2014, 19:25   #7
 
elite*gold: 0
Join Date: Apr 2014
Posts: 18
Received Thanks: 3
Öhm... Eigentlich sollte das mit rgba(0, 0, 0, .5) funktionieren:



Edit: Bild einbinden will nicht...
M4xicaner is offline  
Old 05/11/2014, 19:55   #8
 
Allmighty™'s Avatar
 
elite*gold: 108
Join Date: Apr 2012
Posts: 647
Received Thanks: 59
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
Allmighty™ is offline  
Old 05/11/2014, 21:59   #9

 
~ JWonderpig ~'s Avatar
 
elite*gold: 60
Join Date: Sep 2013
Posts: 1,427
Received Thanks: 248
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
~ JWonderpig ~ is offline  
Old 05/12/2014, 15:52   #10



 
Shawak's Avatar
 
elite*gold: 0
The Black Market: 259/0/0
Join Date: Apr 2010
Posts: 10,291
Received Thanks: 3,610
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.
Shawak is offline  
Thanks
1 User
Old 05/12/2014, 19:19   #11
 
Allmighty™'s Avatar
 
elite*gold: 108
Join Date: Apr 2012
Posts: 647
Received Thanks: 59
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
Allmighty™ is offline  
Reply

Tags
html opacity problem


Similar Threads Similar Threads
Buy patent for metin2 transparency/opacity in models
06/06/2013 - Metin2 Trading - 0 Replies
Hello everybody! I will pay/buy for explain how to set up trasnparency/opacity in metin2. Source tool 3dsmax/blender/Zbrush. Contact only pm. Regards
Exploitz - Opacity (deep dnb) (looking 4 feedback)
09/07/2012 - Music - 6 Replies
Hello elitepvpers, I just finished producing my latest dnb tune(: And i'm looking for some feedback^^ Exploitz - Opacity - YouTube ~~ Thanks a lot in advance:) :bandit:
[Question] C# Opacity PictureBox
04/02/2010 - .NET Languages - 1 Replies
Hey Coders, I've got a question,, I got a PictureBox in Visual Studio, but i want to make it 50% Transparent, how to do this setting? Thanks
100 percent opacity shadow?
04/29/2009 - Conquer Online 2 - 7 Replies
Anyone know what file to edit to make your shadow 100 percent opacity and make it a big black square? I already tried changing SimpleShadow.dds to full black, but it is only like 60% opacity, and it covers a good 100 pixels under the character, and to the sides of it.



All times are GMT +1. The time now is 05:52.


Powered by vBulletin®
Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.
SEO by vBSEO ©2011, Crawlability, Inc.
This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

Support | Contact Us | FAQ | Advertising | Privacy Policy | Terms of Service | Abuse
Copyright ©2024 elitepvpers All Rights Reserved.