Javascript 仅更改文本的不透明度

我有一个带有子菜单的导航栏，在上面我放置了

不透明度：.5

（因为其他元素将位于下面）。但子菜单上的文本也变得更轻。我希望li的不透明度为.5，其中的文本不透明度为1。我尝试了jquery和css，但它们似乎不起作用。这里有一个

尝试使用

rgba

。将

不透明度：0.5

内部

ul.子菜单替换为此

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

也可以删除

.submenu span {
    opacity:1;
}

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

您将希望使用rgba而不是十六进制。这将产生您想要的外观

   .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;
  }

为了支持较旧的浏览器，您可以指定背景颜色为正常颜色，也可以指定50%透明的白色png，并在：hover上删除

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

请注意，除非使用透明png polyfil，否则这在IE6中不起作用。诀窍是使用
rgba（）
而不是
opacity
10秒，非常好。。。哈哈+1 sir问题是原始背景色是从它的父项中获取的。mainli，出于某种原因，我无法覆盖它。刚刚修复了IE的rgba颜色修复。