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