制作父母的背景是对儿童的顶部CSS

我有以下DIV结构：制作父母的背景是对儿童的顶部CSS

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

我要一个半不透明的背景应用到父DIV，和一个完全可见的背景对孩子的DIV 。但是，看起来这个孩子会接管父母，所以，现在我不知道该怎么办。

编辑：一些更多的澄清。

我有一个由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和/或绝对位置来定位顶部的子元素。

来源

2009-12-15 Tower

只是为了澄清，希望父DIV是对孩子的div的顶部？ –

是的。父DIV有一个“纹理”，一张遮盖所有孩子的不透明图像。 – Tower

我不知道我是否正确地强调了你的问题，但是你不是在寻找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

来源

2009-12-15 12:12:16

+1获得有用的链接：P – Mottie

由于孩子是divs，他们会填充到他们可以的最大宽度，这恰好是父母的宽度。因此，孩子和孩子2将覆盖父母填写的所有区域。为了让父母能够看到孩子，可以尝试将孩子的大小设置为小于父母的大小，或尝试向父母添加填充。

来源

2009-12-15 12:03:11 Zoidberg

z-index？尝试this文章！

来源

2009-12-15 12:07:01

请注意，孩子在父母身边。 z-index不会影响相对于父级的子元素。 – Zoidberg

我喜欢这篇文章（http://www.barelyfitz.com/screencast/html-training/css/positioning/），用于向其他人展示z-index和定位的工作方式:) – Mottie

这是IE浏览器的解决方案，代码的大胆作品是神奇的：

<style type="text/css"> 

#parent { background: red; opacity: .5; filter: alpha(opacity=50); width: 100px; height: 100px } 
#child1, #child2 { margin: 10px; position: relative } 
#child1 { background: blue } 
#child2 { background: green } 

</style> 

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

是跨浏览器我会建议使用在父母的背景阿尔法PNG，使生活变得更轻松。

来源

2009-12-15 12:11:06

除IE 6以外...如果有人使用那一块废话了 – Zoidberg

...然后进入iepngfix.htc :) –

...非重复背景，当然。他可以混合这个相对的技巧为IE6和其余的一个PNG，远非理想，但事情顺利。 –

这里是进度条的代码，我使用：

要改变比例，只是改变了cover类的postiion（如left:80%），当然还有文字百分比都其中的内容在HTML中。此外，它使用半透明png作为条形图，因此您可以在此情况下更改条形背景色#888888以匹配您所需的任何颜色。

注：文件被托管在tinypic，它已经有点慢，我最近，所以给它一些额外秒钟，看到的图像。

CSS

.wrapper { 
background: transparent url(http://i50.tinypic.com/2a65xtf.png) no-repeat scroll 0pt 0pt; 
width: 216px; 
height: 25px; 
position: relative; 
} 
.bar { 
background: #888888 url(http://i49.tinypic.com/2cdzyj9.png) repeat scroll center center; 
overflow: hidden; 
position: absolute; 
display: block; 
width: 200px; 
height: 15px; 
top: 6px; 
left: 8px; 
text-indent: -30px; 
} 
.cover { 
background: transparent url(http://i47.tinypic.com/zyfq61.png) repeat-x scroll 0pt 0pt; 
position: absolute; 
display: block; 
width: 200px; 
height: 15px; 
top: 0px; 
} 
.bartext { 
position: absolute; 
display: block; 
top: -0.2em; 
font-size: 12pt; 
font-weight: bold; 
color: #ffffff; 
}

HTML

<div class="wrapper"> 
<span class="bar"> 
    <em class="cover" style="left:50%"> 
    <span class="bartext">50%</span> 
    </em> 
</span> 
</div>

来源

2009-12-15 13:47:29 Mottie

制作父母的背景是对儿童的顶部CSS

回答

相关问题