gpt4 book ai didi

css - 如何在此表单上创建叠加层

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

我希望在此表单上方创建一个红色覆盖层,具有一定的不透明度,并且加载器显示在中间。加载器类显示加载,覆盖类用于覆盖。

.overlay {
background: red;
opacity: 0.5;
position: absolute;
}

.loader {
border: 16px solid #f3f3f3;
/* Light grey */
border-top: 16px solid #3498db;
/* Blue */
border-radius: 50%;
width: 120px;
height: 120px;
animation: spin 2s linear infinite;
}

@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>

<body>

<div class="container">

<form>
<div class="overlay"></div>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Check me out</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>

</body>

Code snippet also available on JSFiddle

最佳答案

这是我更改的内容,请告诉我这是否是您要找的内容:

https://jsfiddle.net/f1m7ej2u/3/

HTML:

<form>
<div class="overlay">
<div class="loader">
</div>
</div>
....
</form>

CSS:

form {
position:relative;
}

.overlay {
background: red;
opacity: 0.5;
position: absolute;
top: 0;
left: 0;
bottom:0;
right:0;
z-index:2019;
}

关于css - 如何在此表单上创建叠加层,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54633306/

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