Question

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

的jsfiddle

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没有＆＃34;重叠＆＃34;你的内部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;
}

编辑：关于hex到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")))

外部div背景重叠内部div

1 个答案: