I’ve been digging for answers, and I’m just having a hard time getting one simple solution for something that doesn’t seem like it should be such a pain!
I’ve got a table with the opacity set to .8 so that the fullscreen background can be slightly visible, but I want the contents within the table to be 100%, or to be fully solid / opaque with no hints of transparency. I’m trying to put images down, and it is terrible if you can see through the image and into the background! Here’s a sample, and you can see what I mean when I say it looks no good at all: http://503rephotography.com/v-test-black/
I could live with the very slight transparency on the white text – it’s totally legible, but the image is where I need help, and I’m having a hard time seeing how to do this. Seems like it should be much easier, but the workarounds I’ve run across will only help with text.
Any input / links / suggestions would be greatly appreciated!!
Thanks Eric, I’m guessing this works just fine, but my dumbass is probably doing something wrong here! I’m (obviously) new to CSS, I worked with HTML long ago, but am trying to get up to speed with everything.
I’ve copied and pasted this code directly and the text is still a little transparent. To make it more obvious, I made the transparency 50% so that if anything were opaque, it would stick out. I tried to just keep the copied code all the same to make things simple; the only change I made was the opacity numbers, but that didn’t seem to change anything. Just to confirm since the link doesn’t go into much detail – this is the route to take when trying to make something opaque w/ no transparency at all even though it’s in a transparent table / object, right?
The short answer is you can’t. When giving an element an opacity lower than 1, it will affect all its children as well. They will still have a 100% opacity, but within a half transparent element, making them transparent as well.
If you simply want to give a transparent background to your table, you might want to give a try to either rgba() or hsla(). Those color notations allow you to edit the alpha channel of the color to make it partially transparent.
Thanks Hugo!!! You rule =) that totally fixed the issue I’ve been so annoyed with! I need to sit down and kick the old habits of tables, etc., I feel like I’m having the “you can’t teach an old dog new tricks” type of a problem, hah! Anyone have any tutorials or literature they recommend for someone with knowhow on HTML working to CSS? These forums and other resources on the net are quite helpful, but I wouldn’t have to bug everyone with menial questions as often.
Sorry; I didn’t mean an explanation about the code you offered – rather, an explanation about the underlying problem. The fact remains that the code you cited -the parts that actually apply to the problem @trevorpdx was facing- *doesn’t use* `opacity`.
What `opacity` does, and was always intended to do, is adjust the opacity of the element itself (which includes, of course, the element’s contents). There is no good “workaround,” nor should there be, since it isn’t a bug.
If you want a semi-transparent *background*, then you shouldn’t be using `opacity`: RGBA backgrounds (or HSLA, or png) is the appropriate solution.
And while four lines of code may not “need” an explanation, an explanation never hurts. : )