CODEWITHSUNDEEP
htmlcssopacity
Rym
Rym

Reputation: 77

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?

Upvotes: 1

Views: 14159

Answers (4)

David Tran
David Tran

Reputation: 10634

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. :)

Upvotes: 1

bricker
bricker

Reputation: 8941

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.

Upvotes: 0

Ben
Ben

Reputation: 21249

Clive's answer explains it well.

A work around the issue is explained in this SO answer

Upvotes: 0

Clive
Clive

Reputation: 36955

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.

Upvotes: 2

Related Questions