html和css如何实现登录表单容器⽔平⽅向居中,垂直⽅向距顶部⼀段距离,有半透明、模糊的⽑玻璃背景,圆⻆和阴影
时间: 2024-09-12 18:14:54 浏览: 42
要实现登录表单容器的水平和垂直居中,并添加半透明、模糊的毛玻璃效果,您可以结合HTML、CSS和一些CSS3新特性。首先,在HTML部分保持之前的登录表单结构不变,然后在CSS中做如下设置:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>登录页面</title>
<style>
.login-container {
position: fixed; /* 将容器固定在视口 */
top: 50px; /* 距离顶部50像素 */
left: 50%; /* 居中X轴 */
transform: translateX(-50%); /* 向左偏移自身宽度的一半 */
width: 300px; /* 容器宽度 */
height: auto;
background-color: rgba(0, 0, 0, 0.6); /* 半透明背景 */
backdrop-filter: blur(10px); /* 模糊效果 */
border-radius: 10px; /* 圆角 */
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.17); /* 阴影 */
display: flex; /* 弹性盒布局 */
justify-content: center; /* 居中内容 */
align-items: center; /* 自适应垂直方向居中 */
}
form {
padding: 20px;
}
</style>
</head>
<body>
<div class="login-container">
<form action="/submit_login" method="post">
... <!-- 登录表单内容 -->
</form>
</div>
</body>
</html>
```
在上面的样式中:
- `.login-container` 类设置了登录容器的各种样式,包括位置、尺寸、颜色、模糊效果、圆角和阴影等。
- `backdrop-filter` 属性用于给容器添加模糊效果。
- `box-shadow` 属性用于添加阴影。
这样,登录表单就会呈现出您描述的效果。
阅读全文