gpt4 book ai didi

HTML 按钮不能与 css 背景重叠

转载 作者:行者123 更新时间:2023-11-28 00:35:25 29 4
gpt4 key购买 nike

我想在云背景的顶部显示登录表单。我从 this link 复制云背景脚本.在 css .cloud 中,我将位置从相对位置更改为绝对位置,但登录表单不会在云顶部移动。

这是我在登录表单之前粘贴云背景脚本的代码。

* {
margin: 0;
padding: 0;
}

body {
/*To hide the horizontal scroller appearing during the animation*/
overflow: hidden;
}

#clouds {
padding: 100px 0;
#background: #c9dbe9;
#background: -webkit-linear-gradient(top, #c9dbe9 0%, #fff 100%);
#background: -linear-gradient(top, #c9dbe9 0%, #fff 100%);
#background: -moz-linear-gradient(top, #c9dbe9 0%, #fff 100%);
}


/*Time to finalise the cloud shape*/

.cloud {
width: 200px;
height: 60px;
background: #fff;
border-radius: 200px;
-moz-border-radius: 200px;
-webkit-border-radius: 200px;
position: absolute;
}

.cloud:before,
.cloud:after {
content: '';
position: absolute;
background: #fff;
width: 100px;
height: 80px;
position: absolute;
top: -15px;
left: 10px;
border-radius: 100px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
-moz-transform: rotate(30deg);
}

.cloud:after {
width: 120px;
height: 120px;
top: -55px;
left: auto;
right: 15px;
}


/*Time to animate*/

.x1 {
-webkit-animation: moveclouds 15s linear infinite;
-moz-animation: moveclouds 15s linear infinite;
-o-animation: moveclouds 15s linear infinite;
}


/*variable speed, opacity, and position of clouds for realistic effect*/

.x2 {
left: 200px;
-webkit-transform: scale(0.6);
-moz-transform: scale(0.6);
transform: scale(0.6);
opacity: 0.6;
/*opacity proportional to the size*/
/*Speed will also be proportional to the size and opacity*/
/*More the speed. Less the time in 's' = seconds*/
-webkit-animation: moveclouds 25s linear infinite;
-moz-animation: moveclouds 25s linear infinite;
-o-animation: moveclouds 25s linear infinite;
}

.x3 {
left: -250px;
top: -200px;
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
transform: scale(0.8);
opacity: 0.8;
/*opacity proportional to the size*/
-webkit-animation: moveclouds 20s linear infinite;
-moz-animation: moveclouds 20s linear infinite;
-o-animation: moveclouds 20s linear infinite;
}

.x4 {
left: 470px;
top: -250px;
-webkit-transform: scale(0.75);
-moz-transform: scale(0.75);
transform: scale(0.75);
opacity: 0.75;
/*opacity proportional to the size*/
-webkit-animation: moveclouds 18s linear infinite;
-moz-animation: moveclouds 18s linear infinite;
-o-animation: moveclouds 18s linear infinite;
}

.x5 {
left: -150px;
top: -150px;
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
transform: scale(0.8);
opacity: 0.8;
/*opacity proportional to the size*/
-webkit-animation: moveclouds 20s linear infinite;
-moz-animation: moveclouds 20s linear infinite;
-o-animation: moveclouds 20s linear infinite;
}

@-webkit-keyframes moveclouds {
0% {
margin-left: 1000px;
}
100% {
margin-left: -1000px;
}
}

@-moz-keyframes moveclouds {
0% {
margin-left: 1000px;
}
100% {
margin-left: -1000px;
}
}

@-o-keyframes moveclouds {
0% {
margin-left: 1000px;
}
100% {
margin-left: -1000px;
}
}
<div id="clouds">
<div class="cloud x1"></div>
<!-- Time for multiple clouds to dance around -->
<div class="cloud x2"></div>
<div class="cloud x3"></div>
<div class="cloud x4"></div>
<div class="cloud x5"></div>
</div>

<!-- ************ This is my login form ************ -->
<div id="authloginContainer">
<div class="authloginTabContent" authpluginarray="1,2,3" modelnum="0">
<div class="authmodel authmodel_0 blueColorContainer">
<p>&nbsp;</p>
<div class="marbom6 usernameContainer">
<p class="pContainer authinputwidth">
<label></label>
<input id="username" value="Account" emptytip="Account" type="text" class="frm-input"></p>
</div>
<div class="marbom6 passwordContainer" style="margin-bottom: 0;">
<p class="center pContainer authinputwidth">
<label></label>
<input id="password" value="Password" emptytip="Password" type="text" class="frm-input"></p>
</div>

<div class="rmbPwdContainer" style="display: none;margin: 0 auto;width: 270px;">
<p class="center yaHei" style="text-align:left;padding-left: 24px;">
<input id="rememberPwd" name="rememberPwd" type="checkbox" savetime="14" onclick="selectRememberPwd()" class="remPwdInp">Remember password</p>
</div>
<div class="validcodeContainer authenticationcodeContainer" style="margin-top: 10px; display: block;">
<p class="pContainer authinputwidth">
<input id="validCode" value="Verification code" type="text" class="frm-input" onkeydown="subLoginCheck()" data-type="" style="" emptytip="Verification code" validcodecomplex="2" validcodelength="4"></p>
</div>
<p style="margin-top: 5px; text-align: center">

<input id="loginBtn" type="button" value="Log In" class="frm-button borderRadius4" style="background-color: #95F4FF; border-color: #95F4FF;" onclick="login()"></p>

</p>
<p>&nbsp;</p>
</div>
</div>
</div>

如何在云后台顶部显示登录表单?

最佳答案

改变表格的位置:)

类似这样的东西

#authloginContainer {
position: fixed;
width: 200px;
top: 50px;
left: calc(50% - 100px);
}

* {
margin: 0;
padding: 0;
}

body {
/*To hide the horizontal scroller appearing during the animation*/
overflow: hidden;
}

#clouds {
padding: 100px 0;
background: #c9dbe9;
background: -webkit-linear-gradient(top, #c9dbe9 0%, #fff 100%);
background: -linear-gradient(top, #c9dbe9 0%, #fff 100%);
background: -moz-linear-gradient(top, #c9dbe9 0%, #fff 100%);
}

#authloginContainer {
position: fixed;
width: 200px;
top: 50px;
left: calc(50% - 100px);
}


/*Time to finalise the cloud shape*/

.cloud {
width: 200px;
height: 60px;
background: #fff;
border-radius: 200px;
-moz-border-radius: 200px;
-webkit-border-radius: 200px;
position: absolute;
}

.cloud:before,
.cloud:after {
content: '';
position: absolute;
background: #fff;
width: 100px;
height: 80px;
position: absolute;
top: -15px;
left: 10px;
border-radius: 100px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
-moz-transform: rotate(30deg);
}

.cloud:after {
width: 120px;
height: 120px;
top: -55px;
left: auto;
right: 15px;
}


/*Time to animate*/

.x1 {
-webkit-animation: moveclouds 15s linear infinite;
-moz-animation: moveclouds 15s linear infinite;
-o-animation: moveclouds 15s linear infinite;
}


/*variable speed, opacity, and position of clouds for realistic effect*/

.x2 {
left: 200px;
-webkit-transform: scale(0.6);
-moz-transform: scale(0.6);
transform: scale(0.6);
opacity: 0.6;
/*opacity proportional to the size*/
/*Speed will also be proportional to the size and opacity*/
/*More the speed. Less the time in 's' = seconds*/
-webkit-animation: moveclouds 25s linear infinite;
-moz-animation: moveclouds 25s linear infinite;
-o-animation: moveclouds 25s linear infinite;
}

.x3 {
left: -250px;
top: -200px;
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
transform: scale(0.8);
opacity: 0.8;
/*opacity proportional to the size*/
-webkit-animation: moveclouds 20s linear infinite;
-moz-animation: moveclouds 20s linear infinite;
-o-animation: moveclouds 20s linear infinite;
}

.x4 {
left: 470px;
top: -250px;
-webkit-transform: scale(0.75);
-moz-transform: scale(0.75);
transform: scale(0.75);
opacity: 0.75;
/*opacity proportional to the size*/
-webkit-animation: moveclouds 18s linear infinite;
-moz-animation: moveclouds 18s linear infinite;
-o-animation: moveclouds 18s linear infinite;
}

.x5 {
left: -150px;
top: -150px;
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
transform: scale(0.8);
opacity: 0.8;
/*opacity proportional to the size*/
-webkit-animation: moveclouds 20s linear infinite;
-moz-animation: moveclouds 20s linear infinite;
-o-animation: moveclouds 20s linear infinite;
}

@-webkit-keyframes moveclouds {
0% {
margin-left: 1000px;
}
100% {
margin-left: -1000px;
}
}

@-moz-keyframes moveclouds {
0% {
margin-left: 1000px;
}
100% {
margin-left: -1000px;
}
}

@-o-keyframes moveclouds {
0% {
margin-left: 1000px;
}
100% {
margin-left: -1000px;
}
}
<div id="clouds">
<div class="cloud x1"></div>
<!-- Time for multiple clouds to dance around -->
<div class="cloud x2"></div>
<div class="cloud x3"></div>
<div class="cloud x4"></div>
<div class="cloud x5"></div>
</div>

<!-- ************ This is my login form ************ -->
<div id="authloginContainer">
<div class="authloginTabContent" authpluginarray="1,2,3" modelnum="0">
<div class="authmodel authmodel_0 blueColorContainer">
<p>&nbsp;</p>
<div class="marbom6 usernameContainer">
<p class="pContainer authinputwidth">
<label></label>
<input id="username" value="Account" emptytip="Account" type="text" class="frm-input"></p>
</div>
<div class="marbom6 passwordContainer" style="margin-bottom: 0;">
<p class="center pContainer authinputwidth">
<label></label>
<input id="password" value="Password" emptytip="Password" type="text" class="frm-input"></p>
</div>

<div class="rmbPwdContainer" style="display: none;margin: 0 auto;width: 270px;">
<p class="center yaHei" style="text-align:left;padding-left: 24px;">
<input id="rememberPwd" name="rememberPwd" type="checkbox" savetime="14" onclick="selectRememberPwd()" class="remPwdInp">Remember password</p>
</div>
<div class="validcodeContainer authenticationcodeContainer" style="margin-top: 10px; display: block;">
<p class="pContainer authinputwidth">
<input id="validCode" value="Verification code" type="text" class="frm-input" onkeydown="subLoginCheck()" data-type="" style="" emptytip="Verification code" validcodecomplex="2" validcodelength="4"></p>
</div>
<p style="margin-top: 5px; text-align: center">

<input id="loginBtn" type="button" value="Log In" class="frm-button borderRadius4" style="background-color: #95F4FF; border-color: #95F4FF;" onclick="login()"></p>

</p>
<p>&nbsp;</p>
</div>
</div>
</div>

关于HTML 按钮不能与 css 背景重叠,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54179132/

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