Transparent Parent/Non Transparent Child

[corq-media]

Hello everyone!

I am creating this post for the second time as I can’t seem to find my original post…I dont know if I made an error when submitting it so I do apologize if this is a repost of my own.

Basically what I am looking to do is have a parent element transparent while keeping the child elements full opacity.

I did come across this https://css-tricks.com/non-transparent-elements-inside-transparent-elements/ which shows how to do it however I am concerned with using position: relative as I would like to keep my website responsive to change in browser size. I have been told in the past that using position is not a good idea when considering responsive web design. Any clarity on this would be greatly appreciated.

Also to give you all a little code to glance at;

[MOD EDIT – Codedump Removed]

[MOD COMMENT]

[Your posts contained too many live links and so was treated as spam. We prefer demos to be in Codepen.io rather than made in large codedumps such as the one I have had to remove]

 What my goal is, have .content to have a bg-color of #333 with a opacity .3. When I did this prior it made the .imgGallery elements transparent as well. I attempted to put opacity 1 on the .imgGallery, hopeing this would work…and it didn’t.

I want to know if the above link I sent will work for responsive design, or another method of putting an effect or style on a parent element without affecting a child element?

Any information would be greatly appreciated!!!

Thank you all and I look forward to becoming an active memeber

[Paulie_D]

What my goal is, have .content to have a bg-color of #333 with a opacity .3.

You can use RGBA colors for this.

This #333 with a opacity .3.

is the same as this rgba(51,51,51,0.3)

http://codepen.io/Paulie-D/pen/jEWvNK

[__]

What my goal is, have .content to have a bg-color of #333 with a opacity .3. When I did this prior it made the .imgGallery elements transparent as well. I attempted to put opacity 1 on the .imgGallery, hopeing this would work…and it didn’t.

To be clear, opacity is supposed to affect the entire element, including child elements (and text). After all, those child elements/nodes are a part of the parent element.

This is a very common point of confusion, sometimes even among more experienced coders. In short, opacity works just fine; it’s not a mistake or bug, and you aren’t doing anything specifically wrong. It’s just, often, “not the property you’re looking for.”

: )

[Author]

Posts