英文:
Scale background image behind form
问题
我想要调整表单元素背后的背景图像：
以下是我的示例：
<!-- 开始片段: js 隐藏: false 控制台: true Babel: false -->
<!-- 语言: lang-html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
.header {
background-color: white;
padding: 20px;
}
/* ...（其余样式）... */
.container-background {
position: relative;
width: 100%;
}
.container-background::before {
content: "";
position: absolute;
top: -150px;
left: 0;
right: 0;
bottom: -150px;
background-image: url('https://generations.krea.ai/images/cda5a90c-6128-4b50-aa07-fd0fae51b49b.webp');
background-size: cover;
background-position: center;
z-index: -1;
}
.content-wrapper {
padding-top: 150px;
padding-bottom: 150px;
}
</style>
</head>
<!-- ...（其余代码）... -->
</html>
<!-- 结束片段 -->
如果我将 <div class="container container-background"> 包装在一个 div.row 中，那么背景图像将会缩放。
此外，<div class="row" id="image-container"> 与之有重叠。
最终，表单应该有一个缩放的背景图像，而 <div class="row" id="image-container"> 不应该重叠。
有关如何调整背景图像的建议，请参考以上示例。
英文:
I wan to scale the background image behind the form element:
Here is my example:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
.header {
background-color: white;
padding: 20px;
}
.logo {
font-size: 24px;
font-weight: bold;
}
.search-input-group {
display: flex;
justify-content: center;
gap: 8px;
}
.image-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
opacity: 0;
transition: opacity 0.3s;
}
.image-overlay:hover {
opacity: 1;
}
.image-info {
position: absolute;
bottom: 10px;
display: flex;
justify-content: space-between;
width: 100%;
padding: 0 10px;
color: white;
}
.image-info .icon {
display: flex;
align-items: center;
gap: 4px;
}
.position-relative:hover .image-overlay {
opacity: 1;
}
.container-background {
position: relative;
width: 100%;
}
.container-background::before {
content: "";
position: absolute;
top: -150px;
left: 0;
right: 0;
bottom: -150px;
background-image: url('https://generations.krea.ai/images/cda5a90c-6128-4b50-aa07-fd0fae51b49b.webp');
background-size: cover;
background-position: center;
z-index: -1;
}
.content-wrapper {
padding-top: 150px;
padding-bottom: 150px;
}
</style>
</head>
<body>
<header class="p-3 mb-3 border-bottom sticky-top bg-white">
<div class="container">
<div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
<a href="/" class="d-flex align-items-center mb-2 mb-lg-0 link-body-emphasis text-decoration-none" style="
font-size: 20px;
color: black;
">
Test
</a>
<div class="col-md-3 text-end ms-auto"> <!-- Add the "ms-auto" class here -->
<a href="#" class="btn btn-primary ms-3">
Submit
</a>
</div>
</div>
</div>
</header>
<div class="container container-background">
<div class="content-wrapper">
<form method="GET" action="" class="text-center search-box">
<div class="row align-items-center">
<div class="col-9">
<div class="search-input-group">
<input type="search" name="search" class="form-control"
placeholder="Search..." value="">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</div>
</form>
<div class="col-12">
<div class="mt-1">
<span class="badge bg-secondary tag" data-tag="test1">Test 1</span>
<span class="badge bg-secondary tag" data-tag="test2">Test 1</span>
<span class="badge bg-secondary tag" data-tag="test3">Test 1</span>
</div>
</div>
</div>
</div>
<div class="row" id="image-container">
<div class="col-sm-6 col-md-4 col-lg-3 mb-4">
<a href="">
<div class="position-relative">
<img src="https://generations.krea.ai/images/06d734d7-7220-4c61-89b5-aee102b798da.webp" alt="" class="img-fluid">
</div>
</a>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 mb-4">
<a href="">
<div class="position-relative">
<img src="https://generations.krea.ai/images/06d77c3a-1050-4c39-a33a-a79887f9ffd1.webp" alt="" class="img-fluid">
</div>
</a>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 mb-4">
<a href="">
<div class="position-relative">
<img src="https://generations.krea.ai/images/06db115d-fae9-48db-bc14-e3ed9cb83427.webp" alt="" class="img-fluid">
</div>
</a>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 mb-4">
<a href="">
<div class="position-relative">
<img src="https://generations.krea.ai/images/06e1e639-7207-48ef-a2ca-3f4e70b14796.webp" alt="" class="img-fluid">
</div>
</a>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 mb-4">
<a href="">
<div class="position-relative">
<img src="https://generations.krea.ai/images/06eac403-517e-4159-ab1a-b97bd5380d04.webp" alt="" class="img-fluid">
</div>
</a>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script>
</body>
</html>
<!-- end snippet -->
If I wrap the <div class="container container-background"> in a div.row then the background image scales.
Furthermore, there is an overlap with the <div class="row" id="image-container">.
In the end the form should have a scaled background image and the <div class="row" id="image-container"> should not overlap.
Any suggestions how to scale the background image?
答案1
得分: 1
以下是您提供的内容的中文翻译：
我认为使用网格布局对于您的页面结构会更容易。
您有1列，3行。
第一行是页眉
第二行是带背景的表单
第三行是您的图片
在代码中，您可以随后调整grid-template-row的值，可以使用像素值或百分比：
页眉72像素
表单35%
图片1fr
请注意，网格默认单元格是stretch，这意味着表单单元格的宽度为100％，高度中您放置的值（这里是35％）
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
.pageContainer {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 72px 35% 1fr;
row-gap: 10px;
}
.header {
background-color: white;
padding: 20px;
}
.search-input-group {
display: flex;
justify-content: center;
gap: 8px;
}
.container-background {
background-image: url('https://generations.krea.ai/images/cda5a90c-6128-4b50-aa07-fd0fae51b49b.webp');
background-size: cover;
background-position: center;
}
.content-wrapper {
position: relative;
z-index: 1;
padding-top: 50px;
padding-left: 50px;
}
<div class="pageContainer">
<div class="header p-3 mb-3 border-bottom sticky-top bg-white">
<div class="container">
<div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
<a href="/" class="d-flex align-items-center mb-2 mb-lg-0 link-body-emphasis text-decoration-none" style="font-size: 20px;color: black;"> Test </a>
<div class="col-md-3 text-end ms-auto">
<!-- 在这里添加 "ms-auto" 类 -->
<a href="#" class="btn btn-primary ms-3"> Submit </a>
</div>
</div>
</div>
</div>
<div class="container container-background">
<div class="content-wrapper">
<form method="GET" action="" class="text-center search-box">
<div class="row align-items-center">
<div class="col-9">
<div class="search-input-group">
<input type="search" name="search" class="form-control" placeholder="搜索..." value="">
<button type="submit" class="btn btn-primary">提交</button>
</div>
</div>
</div>
</form>
<div class="col-12">
<div class="mt-1">
<span class="badge bg-secondary tag" data-tag="test1">测试1</span> <span class="badge bg-secondary tag" data-tag="test2">测试2</span> <span class="badge bg-secondary tag" data-tag="test3">测试3</span>
</div>
</div>
</div>
</div>
<div class="row" id="image-container">
<div class="col-sm-6 col-md-4 col-lg-3 mb-4">
<a href="">
<div class="position-relative">
<img src="https://generations.krea.ai/images/06d734d7-7220-4c61-89b5-aee102b798da.webp" alt="" class="img-fluid">
</div>
</a>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 mb-4">
<a href="">
<div class="position-relative">
<img src="https://generations.krea.ai/images/06d77c3a-1050-4c39-a33a-a79887f9ffd1.webp" alt="" class="img-fluid">
</div>
</a>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 mb-4">
<a href="">
<div class="position-relative">
<img src="https://generations.krea.ai/images/06db115d-fae9-48db-bc14-e3ed9cb83427.webp" alt="" class="img-fluid">
</div>
</a>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 mb-4">
<a href="">
<div class="position-relative">
<img src="https://generations.krea.ai/images/06e1e639-7207-48ef-a2ca-3f4e70b14796.webp" alt="" class="img-fluid">
</div>
</a>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 mb-4">
<a href="">
<div class="position-relative">
<img src="https://generations.krea.ai/images/06eac403-517e-4159-ab1a-b97bd5380d04.webp" alt="" class="img-fluid">
</div>
</a>
</div>
</div>
</div>
英文:
I think using a grid it'll be lot easier for your page structure.
You have 1 column, 3 rows.
first row is header
second is form with background
third your images
In the code there after you can play with grid-template-row values, putting px value or percentage actually:
72px for header
35% for form
1fr for images
note that grid default cell is stretch, meaning form cell is 100% width, and the value you put in height (here 35%)
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">.pageContainer {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 72px 35% 1fr;
row-gap: 10px;
}
.header {
background-color: white;
padding: 20px;
}
.search-input-group {
display: flex;
justify-content: center;
gap: 8px;
}
.container-background {
background-image: url('https://generations.krea.ai/images/cda5a90c-6128-4b50-aa07-fd0fae51b49b.webp');
background-size: cover;
background-position: center;
}
.content-wrapper {
position: relative;
z-index: 1;
padding-top: 50px;
padding-left: 50px;
}
<!-- language: lang-html -->
<div class="pageContainer">
<div class="header p-3 mb-3 border-bottom sticky-top bg-white">
<div class="container">
<div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
<a href="/" class="d-flex align-items-center mb-2 mb-lg-0 link-body-emphasis text-decoration-none" style="font-size: 20px;color: black;"> Test </a>
<div class="col-md-3 text-end ms-auto">
<!-- Add the "ms-auto" class here -->
<a href="#" class="btn btn-primary ms-3"> Submit </a>
</div>
</div>
</div>
</div>
<div class="container container-background">
<div class="content-wrapper">
<form method="GET" action="" class="text-center search-box">
<div class="row align-items-center">
<div class="col-9">
<div class="search-input-group">
<input type="search" name="search" class="form-control" placeholder="Search..." value="">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</div>
</form>
<div class="col-12">
<div class="mt-1">
<span class="badge bg-secondary tag" data-tag="test1">Test 1</span> <span class="badge bg-secondary tag" data-tag="test2">Test 1</span> <span class="badge bg-secondary tag" data-tag="test3">Test 1</span>
</div>
</div>
</div>
</div>
<div class="row" id="image-container">
<div class="col-sm-6 col-md-4 col-lg-3 mb-4">
<a href="">
<div class="position-relative">
<img src="https://generations.krea.ai/images/06d734d7-7220-4c61-89b5-aee102b798da.webp" alt="" class="img-fluid">
</div>
</a>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 mb-4">
<a href="">
<div class="position-relative">
<img src="https://generations.krea.ai/images/06d77c3a-1050-4c39-a33a-a79887f9ffd1.webp" alt="" class="img-fluid">
</div>
</a>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 mb-4">
<a href="">
<div class="position-relative">
<img src="https://generations.krea.ai/images/06db115d-fae9-48db-bc14-e3ed9cb83427.webp" alt="" class="img-fluid">
</div>
</a>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 mb-4">
<a href="">
<div class="position-relative">
<img src="https://generations.krea.ai/images/06e1e639-7207-48ef-a2ca-3f4e70b14796.webp" alt="" class="img-fluid">
</div>
</a>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 mb-4">
<a href="">
<div class="position-relative">
<img src="https://generations.krea.ai/images/06eac403-517e-4159-ab1a-b97bd5380d04.webp" alt="" class="img-fluid">
</div>
</a>
</div>
</div>
</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论