himynameismark Posted August 27, 2008 Share Posted August 27, 2008 Is there a way to make the table background color tranparent in CSS? I have a background image and would like it to still be seen, yet faded enough to make the text easier to read.Thanks in advance! Link to comment Share on other sites More sharing options...
Synook Posted August 27, 2008 Share Posted August 27, 2008 You could use a semi-transparent PNG image for the background. There are RGBA and other transparency-describing notations in CSS 3 but they are even less well supported than alpha-channel PNGs. Link to comment Share on other sites More sharing options...
Kingy Posted August 27, 2008 Share Posted August 27, 2008 Semi-transparent png's are a good idea, but I also ran into this link which I only just recently found.Perhaps you'll be interested in it.http://www.mandarindesign.com/opacitycolor.html Link to comment Share on other sites More sharing options...
himynameismark Posted August 28, 2008 Author Share Posted August 28, 2008 I tried doing what that website said to do, and instead of my table having a transparent background, it made dropdown box transparent with no background for the table at all. I'm probably going to end up just using the PNG. Link to comment Share on other sites More sharing options...
Kingy Posted August 28, 2008 Share Posted August 28, 2008 Really? That could be just something to do with your syntax but in any case png is a good solution. But it's just personal preference I'd prefer to do it in CSS so all I have to do is just change a value. ^^ Link to comment Share on other sites More sharing options...
himynameismark Posted August 28, 2008 Author Share Posted August 28, 2008 Yeah, I'd much rather do it in CSS or even HTML. Have you done it and made it work? Because I don't currently have any programs I can make a transparent PNG with, I would have to get somebody else to make me an image or download a trial version of Fireworks or Photoshop or something. Link to comment Share on other sites More sharing options...
himynameismark Posted August 28, 2008 Author Share Posted August 28, 2008 Okay, I just got the background to be transparent, but my dropdown menu is also transparent. I have tried setting the opacity to 100% on option, select, and p (I also put the dropdown box in a p tag to try this).Here's my CSS right now with all that in there. <!-- Body -->body {background-image: url('bg/bg-blackpin.jpg')}<!-- Text -->p {font-family: verdana; arial; sans-serif; color: white; filter:alpha(opacity=100); -moz-opacity:1.00; opacity:1.00;}h1 {font-family: verdana; arial; sans-serif; color: white;}<!-- Links -->a:link {font-family: verdana; arial; sans-serif; color: blue; text-decoration: none;}a:visited {font-family: verdana; arial; sans-serif; color: blue; text-decoration: none;}a:hover {font-family: verdana; arial; sans-serif; color: red; text-decoration: none;}a:active {font-family: verdana; arial; sans-serif; color: blue; text-decoration: none;}<!-- Tables -->table {border: none; background-color: black; filter:alpha(opacity=75); -moz-opacity:.75; opactiy:.75;}td {padding: 1cm 0cm;}<!-- Drop-Down -->select {filter:alpha(opacity=100); -moz-opacity:1.00; opacity:1.00;}option {filter:alpha(opacity=100); -moz-opacity:1.00; opacity:1.00;} Link to comment Share on other sites More sharing options...
Kingy Posted August 29, 2008 Share Posted August 29, 2008 Yeah, I'd much rather do it in CSS or even HTML. Have you done it and made it work? Because I don't currently have any programs I can make a transparent PNG with, I would have to get somebody else to make me an image or download a trial version of Fireworks or Photoshop or something.Have you tried a free software called GIMP? It's like a more simple version of photoshop, and perhaps you can do that in there. Although I haven't used it in a million years so I can't tell you much more than that, I know there are people here who use it. Also i believe the reason it's transparent entirely is because you possibly have your drop downs inside your table, and with your table set to transparent, it'll basically inherit that if that makes sense? That is how you've built your table right? Link to comment Share on other sites More sharing options...
himynameismark Posted August 30, 2008 Author Share Posted August 30, 2008 Yeah, it looks like I'll have to use the PNG as a background if I decide for sure to make it transparent. I'm working on figuring out how to make the background have a border color with only an outlining border (as opposed to dividing my cells) in CSS just because I don't feel like doing it in HTML. I know how to in HTML but not CSS and I can't seem to find it in the tutorials. Link to comment Share on other sites More sharing options...
himynameismark Posted September 1, 2008 Author Share Posted September 1, 2008 Wow, I just figured out how to do this, and it seems we were all thinking way to hard into it. I created two table designs in the CSS file. One was "table.trans" and the other was "table.opaque". The former was the background table which was basically just table tags around the content table, or the opaque table. There was no background for the opaque table, making the transparent table it's background, but the text in the opaque table was still very clear.Thanks for the suggestions and ideas though! Link to comment Share on other sites More sharing options...
smartalco Posted September 2, 2008 Share Posted September 2, 2008 uh, does it look right in IE? It might only be IE 6 and previous, but if I remember right, IE doesn't like translucent things... Link to comment Share on other sites More sharing options...
rzea Posted September 2, 2008 Share Posted September 2, 2008 Transparent ‡ Translucent.I guess he just wanted no background at all, hence, transparent... according to his first post. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.