Opacity !important doesn't work

Here is my code:

<tr style="opacity: 0.5;"><td><img style="opacity: 1.0 !important;" src="/img/crap.png"/><div>Some text, etc...</td></tr>

I wan't the image to be showed with full opacity, and rest should be only 50% opacity, I've tried also with !important attribute, but it doesn't work. I've tried also to move that styles to the class in the css file. Image always has 50% of opacity.

开发者_运维知识库

How can I resolve this?

---

If the table row has an opacity of 0.5 then setting the opacity of the <img> just sets it to 1.0 (or 100%) of 0.5, the opacity of one if it's ancestors.

You'll need to set the table row opacity to 1.0 to make this work.

---

There's an existing question about the same problem with yours.

The link is coming here : Set div's background transparent but not the borders

The strategy is using CSS "background" properties with color and opacity:

background-color: rgba(0,255,255,0.4)

A good article about rgba can be found here : CSS RGBA

Hope this help. :)

---

Clive's answer explains it well.

A work around the issue is explained in this SO answer

---

Opacity is relative to the parent element's opacity (unfortunately). So by setting 0.5 opacity on the tr, every child element will have at MOST 0.5 opacity... unless you use rgba:

tr {
  background: rgb(0, 0, 0) transparent; /* Fallback for web browsers that doesn't support RGBa */
  background: rgba(0, 0, 0, 0.5); /* RGBa with 0.5 opacity */
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000); /* For IE 5.5 - 7*/
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)"; /* For IE 8*/
}

Then everything on top will have whtever opacity you set.