【问题标题】：How to center partially transparent div?如何使部分透明的div居中？
【发布时间】：2022-01-03 02:16:16
【问题描述】：
我有一个非常简单的页面设置，在英雄卡中显示背景图片。
我想在这张英雄卡上设置一个透明的模糊部分。我有这个设置，因此它可以与标题一起使用，但是我尝试扩展模型并将其居中导致某些内容未显示。
如何将透明的模糊 div（代码示例中的命名模块）居中并使其大小固定而不需要绝对定位？
body {
background-color: #fff;
height: 200vh;
position: relative; }
h1 {
font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";}
.hero {
height: 100vh;
width: 100%;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
background: url('https://images.unsplash.com/photo-1641073912526-378e7f5af084?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1975&q=80');
background-attachment: fixed;
overflow: hidden;
}
.module {
background: inherit;
background-attachment: fixed;
width: 80%;
height: 20%;
position: relative;
overflow: hidden;
border-radius: 15px;
}
.module > header {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 20px 10px;
background: inherit;
background-attachment: fixed;
overflow: hidden;
}
.module > header::before {
content: "";
position: absolute;
top: -20px;
left: 0;
width: 200%;
height: 200%;
background: inherit;
background-attachment: fixed;
-webkit-filter: blur(4px);
filter: blur(4px);
}
.module > header::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
#background: rgba(0, 0, 0, 0.25)
}
.module > header > h1 {
margin: 0;
border-radius: 15px;
color: white;
position: relative;
z-index: 1;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="css/bootstrap.min.css">
<title>Test</title>
</head>
<body>
<div class="hero">
<div class="module text-center display-3">
<header>
<h1 class="text-center display-3">
TEST TEXT HERE
</h1>
</header>
</div>
</div>
</body>
</html>
【问题讨论】：
标签：
html
css
twitter-bootstrap
【解决方案1】：
您可以在 div.hero 上使用 flexbox，并使用 flex 的 align-items 和 justify-content 属性定位 div.module，如下例所示。
body {
background-color: #fff;
height: 200vh;
position: relative;
}
h1 {
font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
.hero {
align-items: center;
display: flex;
height: 100vh;
justify-content: center;
width: 100%;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
background: url('https://images.unsplash.com/photo-1641073912526-378e7f5af084?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1975&q=80');
background-attachment: fixed;
overflow: hidden;
}
.module {
background: inherit;
background-attachment: fixed;
width: 80%;
position: relative;
overflow: hidden;
border-radius: 15px;
}
.module>header {
width: 100%;
padding: 20px 10px;
background: inherit;
background-attachment: fixed;
overflow: hidden;
}
.module>header::before {
content: "";
position: absolute;
top: -20px;
left: 0;
width: 200%;
height: 200%;
background: inherit;
background-attachment: fixed;
-webkit-filter: blur(4px);
filter: blur(4px);
}
.module>header::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
#background: rgba(0, 0, 0, 0.25)
}
.module>header>h1 {
margin: 0;
border-radius: 15px;
color: white;
position: relative;
text-align: center;
z-index: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/js/bootstrap.min.js"></script>
<div class="hero">
<div class="module text-center display-3">
<header>
<h1 class="text-center display-3">
TEST TEXT HERE
</h1>
</header>
</div>
</div>
【解决方案2】：
制作h1 宽度100vw 并添加text-align: center; 然后您可以从中调整模糊。我添加了left: 40%; 我还调整了你的背景大小，所以它实际上覆盖了整个宽度而没有重复。
body {
background-color: #fff;
height: 200vh;
position: relative; }
h1 {
font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";}
.hero {
height: 100vh;
width: 100%;
background-position: center;
background-repeat: no-repeat;
background: url('https://images.unsplash.com/photo-1641073912526-378e7f5af084?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1975&q=80');
background-attachment: fixed;
background-size: cover;
overflow: hidden;
}
.module {
background: inherit;
background-attachment: fixed;
width: 80%;
height: 20%;
position: relative;
overflow: hidden;
border-radius: 15px;
}
.module > header {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 20px 10px;
background: inherit;
background-attachment: fixed;
overflow: hidden;
}
.module > header::before {
content: "";
position: absolute;
top: -20px;
left: 40%;
width: 200%;
height: 200%;
background: inherit;
background-attachment: fixed;
-webkit-filter: blur(4px);
filter: blur(4px);
}
.module > header::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
text-align: center;
#background: rgba(0, 0, 0, 0.25)
}
.module > header > h1 {
margin: 0;
border-radius: 15px;
color: white;
position: relative;
z-index: 1;
width: 100vw;
text-align: center;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="css/bootstrap.min.css">
<title>Test</title>
</head>
<body>
<div class="hero">
<div class="module text-center display-3">
<header>
<h1 class="text-center display-3">
TEST TEXT HERE
</h1>
</header>
</div>
</div>
</body>
</html>