gpt4 book ai didi

html - 如何在嵌套的 div 或表单输入字段中显示页面背景

转载 作者:行者123 更新时间:2023-11-28 07:33:27 25 4
gpt4 key购买 nike

我正在制作一个带有透明输入字段的表单,这样主体背景在字段中可见,而表单具有纯色背景。

另外,需要类似的效果来创建一个相框类的东西,它有一个带有纯色背景的外部 div 和一个可以看到页面背景的透明内部 div。

这是使用两个 DIV 的相框标记:

HTML:

<body>
<div class="outer">
<div class="inner">
</div>
</div>
</body>

CSS:

body { background-image: url('http://nuwen.net/wallpaper/background4.png'); }

.outer {
display: flex;
width: 100px;
height: 100px;
background-color: red;
align-items: center;
justify-content: center;
}
.inner {
width: 50px;
height: 50px;
background: transparent;
}

下图显示了我需要实现的目标。似乎输入字段在表单容器层中创建了一个洞。
https://drive.google.com/file/d/0Byz7IT6HpkQ0NHJuNFJheG1tcU0/view?usp=sharing

最佳答案

对于您的表单或表单容器,将此 CSS 置于样式中

background : rgba(0,0,0,0)

或者如果你想在 0.0 到 1 之间使用不同的阴影使用值

喜欢

 background : rgba(0,0,0,0.4) 

EIDT 代码:

.form-container { 
background: rgba(0,0,0,0);
}

编辑代码 2:

样式:

.input-container { 
background: rgba(0,0,0,0);
}

HTML:

<div class="input-container">
<input type="text" name="">
</div>

关于html - 如何在嵌套的 div 或表单输入字段中显示页面背景,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31367647/

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