我是初学者，我想问一下如何才能使“模糊灰色img”始终像图像一样位于中心。 我想要的figma
这是我的代码和结果：这是创建的内容，但它不像以前的图像。右侧和底部粘在浏览器边缘。
CSS：
html,body {
margin: 0px;
height: 100%;
}
.bg img {
position: fixed;
width: 100%;
height: 100%;
background-size: cover;
}
.wrapper {
position: fixed;
width: 100vw;
height: 100vh;
background-color: #38323283;
border-radius: 45px;
box-shadow: 3px 3px 4px #00000040, -3px -3px 4px #00000040;
margin-top: 50px;
margin-bottom: 50px;
margin-left: 50px;
margin-right: 50px;
}
HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>profile</title>
<link rel="stylesheet" href="CSS/style.css">
</head>
<body>
<div class="bg">
<img src="/img/IMG_0720.png" alt="">
<div class="wrapper">
</div>
</div>
</body>
</html>
兄弟用这个代码
html,
body {
margin: 0px;
height: 100%;
}
.bg {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.bg img {
position: fixed;
width: 100%;
height: 100%;
background-size: cover;
}
.wrapper {
position: fixed;
width: calc(100% - 50px); /* change the 50px with your value */
height: calc(100% - 50px); /* change the 50px with your value */
background-color: #38323283;
border-radius: 45px;
box-shadow: 3px 3px 4px #00000040, -3px -3px 4px #00000040;
/* margin-top: 50px; */
/* margin-bottom: 50px; */
/* margin-left: 50px; */
/* margin-right: 50px; */
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>profile</title>
<link rel="stylesheet" href="CSS/style.css" />
</head>
<body>
<div class="bg">
<img src="/img/IMG_0720.png" alt="" />
<div class="wrapper"></div>
</div>
</body>
</html>