Resetting the Opacity of a Child Element - Maple Browser (Samsung Tv App)

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

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/

Disable opacity on child element when parent element has opacity

Solved this problem by changing it to the following:

<div id="contentContainer" style="background: rgba(255,255,255,0.8);">
    Content ...
    <img src="..." alt="Photo" />
</div>

Used just rgba alpha instead of opacity.
Now it works.

Have a child opacity different then parent opacity with CSS

You can't the opacity cannot be greater than parent

but you can use two methods

I have used rgba rgba(0,0,0,0.0)

.rectangle-box {

  width: 200px;

  height: 30px;

  background: rgba(128, 128, 128, 0.3);

  float: right;

  position: relative;

}

.rectangle-red {

  width: 65px;

  height: 30px;

  background: #ff4742;

  opacity: 1;

  float: left;

}

<div class="rectangle-box">

  <div class="rectangle-red"></div>

</div>

opacity for table but dont want to apply that opacity in the div present inside td tag of the table

EDIT:

sorry previous solution was not correct.

you might want to check out these related questions:

I do not want to inherit the child opacity from the parent in CSS

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

this link explains how to use a better fallback for ie6 and 7 , when using rgba

http://css-tricks.com/rgba-browser-support/

opacity for table but dont want to apply that opacity in the div present inside td tag of the table

EDIT:

sorry previous solution was not correct.

you might want to check out these related questions:

I do not want to inherit the child opacity from the parent in CSS

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

this link explains how to use a better fallback for ie6 and 7 , when using rgba

http://css-tricks.com/rgba-browser-support/

How to test web development for the Maple browser installed on Samsung TVs?

In Samsung SDK you have emulator. It's not perfect, but you can test there 95% of your work ;)

You need to register there for access to downloads
http://www.samsungdforum.com/

---

Related Topics