Question

这是我的代码：

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

我想要显示完全不透明的图像，并且休息应该只有50％的不透明度，我也尝试使用!important属性，但它不起作用。我也尝试将这些样式移动到css文件中的类。图像始终具有50％的不透明度。

我该如何解决这个问题？

Answer 1

如果表格行的不透明度为0.5，则设置<img>的不透明度只会将其设置为1.0的{{1}}（或100％），不透明度一个如果它是祖先。

您需要将表格行不透明度设置为0.5才能使其正常工作。

Answer 2

关于你的同样问题存在一个问题。

链接即将到来：Set div's background transparent but not the borders

策略是使用带有颜色和不透明度的CSS“背景”属性：

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

关于rgba的好文章可以在这里找到：CSS RGBA

希望这有帮助。：）

Answer 3

克莱夫的回答很好地解释了。

有关此问题的解决方法在this SO answer

中有解释

Answer 4

不透明度是相对于父元素的不透明度（不幸的是）。因此，通过在tr上设置0.5不透明度，每个子元素将具有MOST 0.5不透明度...除非您使用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*/
}

然后，最重要的是你设置的不透明度。

不透明！重要不起作用

4 个答案: