Question

我有一个带有子菜单的导航栏，我在其上放置opacity:.5（因为其他元素将放在下面）。但子菜单上的文字也变得更轻了。我希望li具有.5不透明度，并且其中的文本具有1个不透明度。我尝试了jquery，我尝试了css，但它们似乎没有用。这是一个JSFiddle

Answer 1

尝试使用rgba代替。使用此

替换opacity: 0.5内的ul.submenu

background-color: rgba(255,0,0,0.5);

您也可以删除

.submenu span {
    opacity:1;
}

您可以阅读有关此属性的更多信息here

<强> Updated Fiddle

Answer 2

诀窍是使用rgba()代替opacity

Answer 3

您将需要使用rgba而不是hex。这将产生你想要的外观。

   .yourclass{
    background: rgba(248,234,234,0.5); // THe .5 is the opacity.

    }

如果您担心IE无法正常运行，请尝试此操作。

 .yourclass {
    background: transparent;-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#7FF8EAEA,endColorstr=#7FF8EAEA)"; /* IE8 */    
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7FF8EAEA,endColorstr=#7FF8EAEA);   /* IE6 & 7 */      
 zoom: 1;
  }

Answer 4

为了支持旧浏览器，您可以指定正常的背景颜色，也可以指定50％透明的白色png：hover

li {
  background: #f00 url(image.png);
}
li:hover,
li:active,
li:focus {
  background: #f00;
}

注意，除非您使用透明的png polyfil

，否则这在IE6中不起作用

仅更改文本的不透明度

4 个答案: