gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-04 15:03:26 26 4
gpt4 key购买 nike

我正在尝试添加要正确看到的内部 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;
}

最佳答案

外部 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")))

关于html - 外部 div 背景与内部 div 重叠,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31147688/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com