Question

是否可以使父元素（div）继承其子元素（div）透明度的一部分？使子项的bgcolor等于父项后面的颜色（在这种情况下是网站背景）不是一个选项，因为div是固定的，滚动会导致内容上的奇怪点。 z-index是没有选择的，因为如果没有任何东西或透明的东西放在它前面，这不能神奇地使其他东西的一部分消失。

我的目标是bgcolor和滚动问题，

CSS

#header{ background-color: #d51a00;
 height: 72px;
 width: 800px;
 position: fixed;
 border-radius: 10px 10px 10px 10px;
}
#submenu{ background-color: #d51a00;
 height: 30px;
 width: 300px;
 position: fixed;
 display: block;
 margin: 72px auto 5px 120px;
 border-radius: 0px 0px 10px 10px;
}
#submenu-l{ background: #fff;
 height: 30px;
 width: 10px;
 float: left;
 border-radius: 0px 10px 0px 0px;
}
#submenu-r{ background: #fff;
 height: 30px;
 width: 10px;
 float: right;
 border-radius: 10px 0px 0px 0px;
}

HTML

<div id="header"></div>
<div id="submenu">
<div id="submenu-l"></div>
<div id="submenu-r"></div>
</div>

我可能稍后将“左”和“右”元素移动到“子菜单”之外，因此底角也可以具有边界半径，但问题将保持不变。

我在StackOverflow和Google上找到了很多替代品，但在这种情况下所有人都会遇到相同的问题，或者需要更多的代码;我/我希望有一个更清洁的解决方案。

http://imgbox.com/X8LC7wbi（不允许发布图片）

添加图片以在滚动时显示问题;背景为灰色，内容字段为白色，因此当内容移动到子菜单字段后面时，可以看到两个灰色字段（子节点div的一部分）。

Answer 1

给他们两个halfTransparent类，并在css类声明中设置透明度？

除非你想要动态改变它，然后jQuery it。

不确定你到底想要做什么。

.semiTransparent{
    background-color: rgba(0,0,0,.4);
}

让子div使父母只在孩子后面透明

1 个答案: