Opacity !important doesn't work

Question

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?

I believe this article should help you: http://stackoverflow.com/questions/7696364/translucent-background-color-with-opaque-border — vantrung -cuncon, Oct 09 '11 at 00:49
@vantrung-cuncon thanks :-) please post an answer with that.. so I can accept it :) — Rym, Oct 09 '11 at 01:06

score 2 · Answer 1 · answered Oct 09 '11 at 00:45

2

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.

answered Oct 09 '11 at 00:45

Clive

36,918
8
87
113

But I wan't the background of table row to have 50% of opacity. – Rym Oct 09 '11 at 00:46
Then the `` will simply have to be outside of the ``; otherwise it will always (correctly) have the same opacity as it's ancestors. – Clive Oct 09 '11 at 00:48
Um yea, but this is not an answer. I know I'll have to set the table row opacity to 1.0 to make this work, so your solution (can't find any btw.) don't help. – Rym Oct 09 '11 at 00:53
It is an answer. The `` must be outside of the ``. Use `position:absolute;` on the `` and `position:relative` on a container around your table. Put the `` inside the container and tweak its `left` and `top` to place it exactly where you want. – Clive Oct 09 '11 at 00:59

score 1 · Accepted Answer · edited May 23 '17 at 12:19

1

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

edited May 23 '17 at 12:19

Community

1
1

answered Oct 09 '11 at 01:16

vantrung -cuncon

10,207
5
47
62

score 0 · Answer 3 · edited May 23 '17 at 11:55

0

Clive's answer explains it well.

A work around the issue is explained in this SO answer

edited May 23 '17 at 11:55

Community

1
1

answered Oct 09 '11 at 00:46

Ben

20,737
12
71
115

score 0 · Answer 4 · answered Oct 09 '11 at 00:49

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.

It fails, because I want to use my own background color on certain table row:/ — Rym, Oct 09 '11 at 00:52

Opacity !important doesn't work

4 Answers4

Linked