要素が非アクティブであることを示すパターンを重ねたいと思います。
li .inactive {
background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAFUlEQVQImWNgQALTGgr+k8phYGAAAFSlChVXUdguAAAAAElFTkSuQmCC) repeat;
}
これはクロス パターンの透明な png です: ///// したがって、下のコンテンツは半透明になります。
問題は、子要素が内部にあるため、実際には背景画像で覆われていないことです。それらがカバーされているようです。白い部分がある画像では特に効果がありません。
そこで、親にはより高い z-index を使用し、子にはより低い z-index を使用してみました???
li .inactive {
z-index: 9999;
}
li .inactive * {
z-index: -1;
}
何か案は?