Resetting the opacity of a child element - Maple Browser (Samsung TV App)

Question

I have an issue with creating a transparent element which has a child element. Using this code the child element gets the opacity value from the parent element.

I need to reset/set the child's element opacity to an arbitrary value. Browser of reference is Maple Browser (for a Samsung TV Application).

 .video-caption {         position: absolute;         top:50px;         width: 180px;         height: 55px;         background-color: #000;         -khtml-opacity:.40;          -moz-opacity:.40;          -ms-filter:"alpha(opacity=40)";         filter:alpha(opacity=40);         filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.4); /*just for testing*/         opacity:.40;      }     .video-caption > p {         color: #fff !important;         font-size: 18px;         -khtml-opacity:1;          -moz-opacity:1;          -ms-filter:"alpha(opacity=100)";         filter:alpha(opacity=100);         filter: progid:DXImageTransform.Microsoft.Alpha(opacity=1);         opacity:1;      } 

EDIT MARKUP

<div> <img id="videothb-1" src="https://xxxxx/splash.jpg"> <div class="video-caption"> <p>Description here</p> </div> </div> 

Answer 1

The problem you probably have (based on looking at your selectors) is that opacity affects all child elements of a parent:

div {     background: #000;     opacity: .4;     padding: 20px; }  p {     background: #f00;     opacity: 1; }​ 

http://jsfiddle.net/Kyle_/TK8Lq/

But there is a solution! Use rgba background values and you can have transparency wherever you want :)

div {     background: rgba(0, 0, 0, 0.4);     /*opacity: .4;*/     padding: 20px; }  p {     background: rgba(255, 0, 0, 1);     /*opacity: 1;*/ }​ 

http://jsfiddle.net/Kyle_/TK8Lq/1/

---

For text, you can just use the same rgba code, but set to the color property of CSS:

color: rgba(255, 255, 255, 1); 

But you must use rgba on everything for this to work, you have to remove the opacity for all parent elements.

http://jsfiddle.net/Kyle_/TK8Lq/2/

Answer 2

Kyle's solution works fine.

In addition, if you don't like to set your colors using RGBA, but rather using HEX, there are solutions.

With LESS for exemple, you could use a mixin like:

.transparentBackgroundColorMixin(@alpha,@color) {   background-color: rgba(red(@color), green(@color), blue(@color), @alpha); } 

And use it like

.myClass {     .transparentBackgroundColorMixin(0.6,#FFFFFF); } 

Actually this is what a built-in LESS function also provide:

.myClass {     background-color: fade(#FFFFFF, 50%); } 

See How to convert HEX color to rgba with Less compiler?