DarkElf Posted June 12, 2006 Share Posted June 12, 2006 I want to set the background colour of a div to be partially transparent so that a image behind shows through a bit but not completely (so its still easy to read text inside the div). I am aware that there is an opacity property in CSS 3 but as this isn't yet supported by some of the main browsers I'm loath to use it.I know there must be an alternative (though probably more complicated) solution that is supported by more browsers because I recall seeing the effect applied previously in older browsers.Does anyone know of any good articles on this? Link to comment Share on other sites More sharing options...
aspnetguy Posted June 12, 2006 Share Posted June 12, 2006 use this .className{ background: #000; width: 400px; height:250px; opacity: .5; /*FireFox*/ filter: alpha(opacity=50); /*IE*/} This set the transparency to 50%. Link to comment Share on other sites More sharing options...
scott100 Posted June 12, 2006 Share Posted June 12, 2006 Does anyone know of any good articles on this?Here's a good one: http://www.mandarindesign.com/opacity.html Link to comment Share on other sites More sharing options...
DarkElf Posted June 12, 2006 Author Share Posted June 12, 2006 Thanks guys, I can't believe some of the things they go into in the article, its a fair bit more powerful than I had thought. Link to comment Share on other sites More sharing options...
scott100 Posted June 12, 2006 Share Posted June 12, 2006 its a fair bit more powerful than I had thought.Especially the section on "Opacity Over Easy", this effect saves you from using javascript rollovers which i have seen in the past which can be slow, just use css, brill Link to comment Share on other sites More sharing options...
vchris Posted June 12, 2006 Share Posted June 12, 2006 Transparency is nice and all but will not pass validation and I believe it doesn't work in Opera Link to comment Share on other sites More sharing options...
aspnetguy Posted June 12, 2006 Share Posted June 12, 2006 Transparency is nice and all but will not pass validation and I believe it doesn't work in Opera <{POST_SNAPBACK}> Why won't it pass validation??? my transparency code validates.opacity: .5 also works in newer versions of opera Link to comment Share on other sites More sharing options...
ThePsion5 Posted June 12, 2006 Share Posted June 12, 2006 There's actually a way to simulate transparancy fairly easily with CSS 1.0, so it's completely compatible with any browser that supports CSS (Even Internet Explorer, i believe). It's also somewhat limited and not real transparency, sadly. Here's how it works.Align your primary background image as so (with a fixed position at the top-left corner) : body {background: black url(bg.jpg) 0 0 no-repeat fixed;} Then, modify the original background file by whitewashing it, changing the color balance, or any number of things and align is the same way you did the original background div#wrapper{background: #468 url(bg_different.jpg) 0 0 no-repeat fixed;} The effect is that the #wrapper div appears to be partially transparant. Here's an example of this nifty little trick Example Link to comment Share on other sites More sharing options...
Jonas Posted June 12, 2006 Share Posted June 12, 2006 There's actually a way to simulate transparancy fairly easily with CSS 1.0, so it's completely compatible with any browser that supports CSS (Even Internet Explorer, i believe). It's also somewhat limited and not real transparency, sadly. Here's how it works.Align your primary background image as so (with a fixed position at the top-left corner) :body {background: black url(bg.jpg) 0 0 no-repeat fixed;} Then, modify the original background file by whitewashing it, changing the color balance, or any number of things and align is the same way you did the original background div#wrapper{background: #468 url(bg_different.jpg) 0 0 no-repeat fixed;} The effect is that the #wrapper div appears to be partially transparant. Here's an example of this nifty little trick Example <{POST_SNAPBACK}> Cool. So all the images are in fact positioned in the upper left corner, but only parts show within the divs? Link to comment Share on other sites More sharing options...
ThePsion5 Posted June 12, 2006 Share Posted June 12, 2006 Exactly, mi amigo. Therefore the only part of the image you see matches the background image perfectly, but since the image itself is modified it looks like it's being viewed through the div. Link to comment Share on other sites More sharing options...
vchris Posted June 12, 2006 Share Posted June 12, 2006 Why won't it pass validation??? my transparency code validates.opacity: .5 also works in newer versions of opera<{POST_SNAPBACK}> Well I had a page with transparency on a div and it gave me warnings. Link to comment Share on other sites More sharing options...
aspnetguy Posted June 12, 2006 Share Posted June 12, 2006 Well I had a page with transparency on a div and it gave me warnings.<{POST_SNAPBACK}> A document that has warnings still passes validation. It is just a reminder that depending on browser settings the line may not function as intended. Link to comment Share on other sites More sharing options...
vchris Posted June 13, 2006 Share Posted June 13, 2006 I always program to not have any warnings or errors. Just seems more professionals when it's perfect.I guess in some cases you can't always do that. Link to comment Share on other sites More sharing options...
Jonas Posted June 13, 2006 Share Posted June 13, 2006 Things I Will NOT be working on: asp.net, because it's dumb. I hate asp.net. How can you say asp.net is dumb? You can certainly hate microsoft, but I can't understand how you can call the technology asp.net dumb. Link to comment Share on other sites More sharing options...
aspnetguy Posted June 13, 2006 Share Posted June 13, 2006 Things I Will NOT be working on: asp.net, because it's dumb. I hate asp.net. How can you say asp.net is dumb? You can certainly hate microsoft, but I can't understand how you can call the technology asp.net dumb.<{POST_SNAPBACK}> Hey, you changed your sig...I am even more hurt :)Seriously, have you tried it? It is a very powerful language. Given the choice I would always pick ASP.Net for the following reasons.1. It is compiled so it runs faster.2. It is compiled so you can hide your source code and still distribute your applications.3. It has the full power of VB.Net or C# because it is not a scripting language like ASP.4. It can easily interact with other popular MS products such as MS Office products.5. Crystal Reports are integrated with ASP.Net.6. Creating custom controls and components is amazingly easy.7. Despite what some may say everything you need to use for development is FREE, IDE, Framework, Database....I could go on but I won't Link to comment Share on other sites More sharing options...
DarkElf Posted June 28, 2006 Author Share Posted June 28, 2006 I've been having a lot of fun with this opacity stuff, however I've just noticed a problem on my pages and can't work out how to fix it.Basically I've got a div which contains text and images which has opacity of 75% so that the background image is partially visible through the div. But it turns out that not only is the div itself transparent, but all of its contents are as well. This is barely noticable with black text, in fact until now I hadn't spotted it at all, but once I started adding images its quite obvious and isn't the desired effect. What I want to do is make the background colour of the div only transparent, the contents should preserve their full opacity.Is this possible? I tried changing the opacity values of the images but that only changes their opacity in relation to the div, not the background image! Link to comment Share on other sites More sharing options...
vchris Posted June 29, 2006 Share Posted June 29, 2006 Yes it is possible! I've done it and there is a trick to making the content 100% opacity.Found it! Opacity on Background with Fully Opaque Text Link to comment Share on other sites More sharing options...
DarkElf Posted June 29, 2006 Author Share Posted June 29, 2006 Forgive me if I'm wrong, but that looks like they are just shifting the contents of a paragraph not included in the div up the page using position relative so that it appears to be inside the div?It's a nice idea but doesn't quite work for my problem as my div is not of a fixed size. Link to comment Share on other sites More sharing options...
vchris Posted June 29, 2006 Share Posted June 29, 2006 Well I did it once but I didn't do it this way all I did (I think) is add another div within that div and add something on it... sry don't remember much and deleted the project...try google worst case if noone here knows Link to comment Share on other sites More sharing options...
aspnetguy Posted June 29, 2006 Share Posted June 29, 2006 This is the only cross browser solution I could find although it is just repositioning an outside element. <div style="width:200px;height:159px;filter:alpha(opacity=25);-moz-opacity:.25;opacity:.25;background:url(http://www.mandarindesign.com/images/monday.jpg)"></div><p style="width:200px;text-align:justify;position:relative;top:-159px;color:black;">This opacity background with fully opaque text works in Mozilla and IE.</p> This solution only works in IEhttp://www.domedia.org/oveklykken/css-transparency.php Link to comment Share on other sites More sharing options...
vchris Posted August 18, 2006 Share Posted August 18, 2006 I got this transparency effect working in IE perfectly, in Firefox I get the transparency on the div and also the text in it which I don't want. I wasn't able to test in Opera to see if it worked fine.Is there a fix for my Firefox issue? Anyone found a way to do this without overlaying the text on the div? Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now