Opacity / Opaque issues – trying to make child elements opaque / solid!

[trevorpdx]

Hi everyone,

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!!

Trevor

[trevorpdx]

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?

Thanks again, any pointers are much appreciated. I’ve updated the code and put it on that same page:
http://503rephotography.com/v-test-black/

Trevor

[Kitty Giraudel]

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.

I’ve written an article on colors here if you want: http://hugogiraudel.com/blog/css-colors

Hope it helps. :)

*Edit*: by the way, we no longer use HTML tables for layout purposes.

*Edit 2*: indeed, I fixed your problem by changing opacity: 0.5 by background: rgba(0,0,0,.5).

[trevorpdx]

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.

Thanks again Hugo, you’ve made my day!

Trevor

[__]

> I don’t know why Hugo would say you can’t. I OBVIOUSLY showed you can.
@Eric

No; [the example you linked to](http://www.visibilityinherit.com/code/modern-css-opacity.php) does not use `opacity`*. It uses RGBA `background`s, which is the same solution
@HugoGiraudel provided (so really, he was affirming your suggestion, while offering a little more in the way of explanation).

*****

** well, admittedly, it does suggest using IE’s `filter:alpha( opacity … )`, which actually results in the same difficulties @trevorpdx described. But thankfully only in IE.*

[__]

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.

*****

*edit*

And while four lines of code may not “need” an explanation, an explanation never hurts. : )

[Kitty Giraudel]

@Eric: you sound frustrated. Someone is asking a question. I’m answering it. What’s up?

[Author]

Posts