我有一個非常簡單的頁面設定，在英雄卡中顯示背景影像。
我想在這張英雄卡上有一個透明的模糊部分。我有這個設定，以便它可以與標題一起使用，但是我嘗試擴展模型并將其居中導致某些內容未顯示。
如何將透明的模糊 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>uj5u.com熱心網友回復：
您可以在 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>uj5u.com熱心網友回復：
制作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>轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/401877.html
上一篇：svg上的背景大小