Q

CSS：透明div部分不透明叠加

2013-07-23 152 views 0 likes

0

我正在为一个网站开发帮助系统，他们希望页面在激活时变为不透明，除了您可以获得帮助的DIV之外。CSS：透明div部分不透明叠加

问题是我无法弄清楚如何让特定的div在透明背景上“出现”透明。

我试着将div的z-index设置为比背景更高的值，但似乎不起作用。

这是一个说明问题的JSBin。任何与“帮助”类应该看起来是透明的（即不是不透明）

http://jsbin.com/ifohuc/1/edit

感谢。

2013-07-23 JoshL

+0

我个人更喜欢使用1px x 1px透明.png文件作为背景 - 图像在divs上。否则，您也会遇到文本透明的麻烦。有办法解决这个问题，但如果你不需要经常更改div颜色，我认为这是一条路。 – JCleveland

A

回答

1

您必须设置li.help的位置属性在CSS文件

例如

position:relative;

2013-07-23 18:30:56

+0

我同意'@ fa7d0'，这是因为'z-index'属性只有在元素设置为'position：absolute;'时才有效，或者在这种情况下它可以与'position：relative'一起使用。你的JSBin和它的工作完美后，添加'位置：相对'你的'li.help' – sulfureous

+0

工作，谢谢！ – JoshL

0

变化#bgDiv到z-index= -1

http://jsbin.com/ifohuc/2/

#bgDiv { 
    width: 100%; 
    height: 100px; 
    min-height: 100%; 
    background-color: #999999; 
    position: absolute; 
    left: 0px; 
    top: 0px; 
    opacity: 0.85; 
    z-index: -1; 
}

2013-07-23 18:21:00 feitla

相关问题