html - 外部 div 背景与内部 div 重叠

Question

我正在尝试添加要正确看到的内部 div 只是因为 outerdiv 与它重叠，尝试使用绝对位置，但不起作用，还希望 html 保持原样，因为我需要外部 div 的高度调整内部 div 的高度。

JsFiddle

http://jsfiddle.net/ms1v8pkv/

HTML

<div class="outer-div">
    <div class="inner-div">
        <input type="text" value="enter value here" />        
    </div>
</div>

CSS

.outer-div {
    background: #445b22 none repeat scroll 0 0;
    height: 114px;
    opacity: 0.35;
    width: 100%;
}
.inner-div {
    display: block;
    margin: 0 auto;
    z-index: 2;
    width: 70%;    
}
input {
    margin-top: 50px;
    background-clip: padding-box;
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    color: #444;
    font-size: 12px;
    font-weight: 400;
    outline: medium none;
    padding: 10px;
}

Answer 1

外部 div 不会“重叠”您的内部 div，只是您在外部 div 上声明的 css 属性 opacity 会继承给所有子元素。您对此无能为力。

您可能想要的是父 div 上的半透明背景颜色，这可以通过 rgba 颜色实现:

/* for demonstration: */
.outer-div {
    /* replace hex value here with the rgba value below */
    background: #445b22 none repeat scroll 0 0;
    /* opacity: 0.35; <- remove this, it becomes the value for the a channel */
    /* hex #445b22 is rgb(68,91,34) */
    background-color: rgba(68,91,34,0.35); /* <- the a channel is the opacity */
}

所以在干净的代码中它将是:

.outer-div {
    background: rgba(68,91,34,0.35) none repeat scroll 0 0;
}

编辑: 十六进制到 rgb 转换的简短说明:

your color:
#44 5b 22 <- hexadecimal values
 r  g  b  
 68 91 34 <- decimal values

white:              black:
#FF  FF  FF         #00 00 00
 r   g   b           r  g  b
 255 255 255         0  0  0

编辑:只是为了胡说八道，一个从十六进制到 rgb 的单行转换器函数将在控制台上执行...:-D

window.prompt("RGB color:",function(string){return "rgb("+(string.match(/^#?(?:(\w\w)(\w\w)(\w\w)$)|(?:(\w)(\w)(\w)$)/).splice(1).filter(function(k){return k!==undefined}).map(function(o){ o=(o.length===1)?o+o:o;return Number.parseInt(o,16)}).join())+")"}(window.prompt("Define hex color","#bada55")))