css - 使 parent 的背景在CSS中位于 child 之上

Question

我有以下 DIV 结构:

<div id="parent">
<div id="child"></div>
<div id="child2"></div>
</div>

我想将一半不透明的背景应用到父 DIV 中，并将完全可见的背景应用到子 DIV 中。但是，似乎 child 会接管 parent ，所以，我现在不知道如何解决这个问题。

编辑:更多说明。

我有一个由 DIV 组成的 jQuery 可拖动“窗口”。在里面，我有一个进度条

relative position like:
position: relative;
left: 16px;
top: 16px;

这样进度条就会在窗口(不是屏幕)的 16-16 处，并且进度条会随着窗口正确移动。

但是，进度条的顶部有纹理。看看这个例子:

<div style="background: url('texture.png'), url('empty.png'); width: 256px;">
<div style="background: url('progress.png'); width: 33%;"></div>
</div>

整个进度条元素应用了一个不透明的纹理，例如，如果这个进度条的百分比是 33%，那么它看起来像 xxx------ 其中 x 表示流动的绿色条，- 是空的。纹理必须应用于 x 和 -，但目前 x 的图像出现在纹理上。

由于相对定位方法，我无法真正使用 Z-index 和/或绝对定位将子元素定位在顶部。

Answer 1

我不知道我是否理解正确你的问题，但你不是在寻找CSS3 RGBA colours吗？ ？

p { color: rgba(0,0,255,0.5) }        /* semi-transparent solid blue */
p { color: rgba(100%, 50%, 0%, 0.1) } /* very transparent solid orange */

引用:4.2.2 RGBA color values