html - 事件标签的嵌套 CSS 规则

Question

这是一个我一直坚持的简单问题，它应该以不透明度显示:1 但事实并非如此。这是我的代码:

CSS

.menu{
    padding-bottom: 30px;
    opacity: 0.3;
}
.menu .active {
    opacity: 1;
}

HTML

<li class="menu"><a href="index.html" title="..."><img src="..." alt="" class="active" width="25"/></a></li>

根据这个site它应该可以工作，但没有，我做错了什么？

编辑:我正在尝试有两个列表图像，一个是淡出的，一个是有事件类的淡入(不透明度 1)。

Answer 1

不透明度继承防止子元素比父元素更不透明。

如果你只是想让背景颜色透明，你可以使用 RGB

.menu
{
    background: rgba(0, 0, 255, 0.3);
}

根据评论更新

试试这个:

.menu img{
    padding-bottom: 30px;
    opacity: 0.3;
}
.menu img.active {
    opacity: 1;
}