缩放表单背后的背景图像。

huangapple
go评论92阅读模式
英文:

Scale background image behind form

问题

我想要调整表单元素背后的背景图像：

以下是我的示例：

  1. <!-- 开始片段: js 隐藏: false 控制台: true Babel: false -->
  3. <!-- 语言: lang-html -->
  4. <!DOCTYPE html>
  5. <html lang="en">
  7. <head>
  8.     <meta charset="UTF-8">
  9.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  10.     <title>Test</title>
  11.     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
  12.     <style>
  14.         .header {
  15.             background-color: white;
  16.             padding: 20px;
  17.         }
  19.         /* ...（其余样式）... */
  21.         .container-background {
  22.             position: relative;
  23.             width: 100%;
  24.         }
  26.         .container-background::before {
  27.             content: "";
  28.             position: absolute;
  29.             top: -150px;
  30.             left: 0;
  31.             right: 0;
  32.             bottom: -150px;
  33.             background-image: url('https://generations.krea.ai/images/cda5a90c-6128-4b50-aa07-fd0fae51b49b.webp');
  34.             background-size: cover;
  35.             background-position: center;
  36.             z-index: -1;
  37.         }
  39.         .content-wrapper {
  40.             padding-top: 150px;
  41.             padding-bottom: 150px;
  42.         }
  43.     
  44.     </style>
  45. </head>
  47. <!-- ...（其余代码）... -->
  49. </html>
  51. <!-- 结束片段 -->

如果我将 <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 -->

  1. &lt;!DOCTYPE html&gt;
  2. &lt;html lang=&quot;en&quot;&gt;
  3. &lt;head&gt;
  4. &lt;meta charset=&quot;UTF-8&quot;&gt;
  5. &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
  6. &lt;title&gt;Test&lt;/title&gt;
  7. &lt;link href=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot;&gt;
  8. &lt;style&gt;
  9. .header {
  10. background-color: white;
  11. padding: 20px;
  12. }
  13. .logo {
  14. font-size: 24px;
  15. font-weight: bold;
  16. }
  17. .search-input-group {
  18. display: flex;
  19. justify-content: center;
  20. gap: 8px;
  21. }
  22. .image-overlay {
  23. position: absolute;
  24. top: 0;
  25. left: 0;
  26. width: 100%;
  27. height: 100%;
  28. background: rgba(0, 0, 0, 0.5);
  29. opacity: 0;
  30. transition: opacity 0.3s;
  31. }
  32. .image-overlay:hover {
  33. opacity: 1;
  34. }
  35. .image-info {
  36. position: absolute;
  37. bottom: 10px;
  38. display: flex;
  39. justify-content: space-between;
  40. width: 100%;
  41. padding: 0 10px;
  42. color: white;
  43. }
  44. .image-info .icon {
  45. display: flex;
  46. align-items: center;
  47. gap: 4px;
  48. }
  49. .position-relative:hover .image-overlay {
  50. opacity: 1;
  51. }
  52. .container-background {
  53. position: relative;
  54. width: 100%;
  55. }
  56. .container-background::before {
  57. content: &quot;&quot;;
  58. position: absolute;
  59. top: -150px;
  60. left: 0;
  61. right: 0;
  62. bottom: -150px;
  63. background-image: url(&#39;https://generations.krea.ai/images/cda5a90c-6128-4b50-aa07-fd0fae51b49b.webp&#39;);
  64. background-size: cover;
  65. background-position: center;
  66. z-index: -1;
  67. }
  68. .content-wrapper {
  69. padding-top: 150px;
  70. padding-bottom: 150px;
  71. }
  72. &lt;/style&gt;
  73. &lt;/head&gt;
  74. &lt;body&gt;
  75. &lt;header class=&quot;p-3 mb-3 border-bottom sticky-top bg-white&quot;&gt;
  76. &lt;div class=&quot;container&quot;&gt;
  77. &lt;div class=&quot;d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start&quot;&gt;
  78. &lt;a href=&quot;/&quot; class=&quot;d-flex align-items-center mb-2 mb-lg-0 link-body-emphasis text-decoration-none&quot; style=&quot;
  79. font-size: 20px;
  80. color: black;
  81. &quot;&gt;
  82. Test
  83. &lt;/a&gt;
  84. &lt;div class=&quot;col-md-3 text-end ms-auto&quot;&gt; &lt;!-- Add the &quot;ms-auto&quot; class here --&gt;
  85. &lt;a href=&quot;#&quot; class=&quot;btn btn-primary ms-3&quot;&gt;
  86. Submit
  87. &lt;/a&gt;
  88. &lt;/div&gt;
  89. &lt;/div&gt;
  90. &lt;/div&gt;
  91. &lt;/header&gt;
  92. &lt;div class=&quot;container container-background&quot;&gt;
  93. &lt;div class=&quot;content-wrapper&quot;&gt;
  94. &lt;form method=&quot;GET&quot; action=&quot;&quot; class=&quot;text-center search-box&quot;&gt;
  95. &lt;div class=&quot;row align-items-center&quot;&gt;
  96. &lt;div class=&quot;col-9&quot;&gt;
  97. &lt;div class=&quot;search-input-group&quot;&gt;
  98. &lt;input type=&quot;search&quot; name=&quot;search&quot; class=&quot;form-control&quot;
  99. placeholder=&quot;Search...&quot; value=&quot;&quot;&gt;
  100. &lt;button type=&quot;submit&quot; class=&quot;btn btn-primary&quot;&gt;Submit&lt;/button&gt;
  101. &lt;/div&gt;
  102. &lt;/div&gt;
  103. &lt;/div&gt;
  104. &lt;/form&gt;
  105. &lt;div class=&quot;col-12&quot;&gt;
  106. &lt;div class=&quot;mt-1&quot;&gt;
  107. &lt;span class=&quot;badge bg-secondary tag&quot; data-tag=&quot;test1&quot;&gt;Test 1&lt;/span&gt;
  108. &lt;span class=&quot;badge bg-secondary tag&quot; data-tag=&quot;test2&quot;&gt;Test 1&lt;/span&gt;
  109. &lt;span class=&quot;badge bg-secondary tag&quot; data-tag=&quot;test3&quot;&gt;Test 1&lt;/span&gt;
  110. &lt;/div&gt;
  111. &lt;/div&gt;
  112. &lt;/div&gt;
  113. &lt;/div&gt;
  114. &lt;div class=&quot;row&quot; id=&quot;image-container&quot;&gt;
  115. &lt;div class=&quot;col-sm-6 col-md-4 col-lg-3 mb-4&quot;&gt;
  116. &lt;a href=&quot;&quot;&gt;
  117. &lt;div class=&quot;position-relative&quot;&gt;
  118. &lt;img src=&quot;https://generations.krea.ai/images/06d734d7-7220-4c61-89b5-aee102b798da.webp&quot; alt=&quot;&quot; class=&quot;img-fluid&quot;&gt;
  119. &lt;/div&gt;
  120. &lt;/a&gt;
  121. &lt;/div&gt;
  122. &lt;div class=&quot;col-sm-6 col-md-4 col-lg-3 mb-4&quot;&gt;
  123. &lt;a href=&quot;&quot;&gt;
  124. &lt;div class=&quot;position-relative&quot;&gt;
  125. &lt;img src=&quot;https://generations.krea.ai/images/06d77c3a-1050-4c39-a33a-a79887f9ffd1.webp&quot; alt=&quot;&quot; class=&quot;img-fluid&quot;&gt;
  126. &lt;/div&gt;
  127. &lt;/a&gt;
  128. &lt;/div&gt;
  129. &lt;div class=&quot;col-sm-6 col-md-4 col-lg-3 mb-4&quot;&gt;
  130. &lt;a href=&quot;&quot;&gt;
  131. &lt;div class=&quot;position-relative&quot;&gt;
  132. &lt;img src=&quot;https://generations.krea.ai/images/06db115d-fae9-48db-bc14-e3ed9cb83427.webp&quot; alt=&quot;&quot; class=&quot;img-fluid&quot;&gt;
  133. &lt;/div&gt;
  134. &lt;/a&gt;
  135. &lt;/div&gt;
  136. &lt;div class=&quot;col-sm-6 col-md-4 col-lg-3 mb-4&quot;&gt;
  137. &lt;a href=&quot;&quot;&gt;
  138. &lt;div class=&quot;position-relative&quot;&gt;
  139. &lt;img src=&quot;https://generations.krea.ai/images/06e1e639-7207-48ef-a2ca-3f4e70b14796.webp&quot; alt=&quot;&quot; class=&quot;img-fluid&quot;&gt;
  140. &lt;/div&gt;
  141. &lt;/a&gt;
  142. &lt;/div&gt;
  143. &lt;div class=&quot;col-sm-6 col-md-4 col-lg-3 mb-4&quot;&gt;
  144. &lt;a href=&quot;&quot;&gt;
  145. &lt;div class=&quot;position-relative&quot;&gt;
  146. &lt;img src=&quot;https://generations.krea.ai/images/06eac403-517e-4159-ab1a-b97bd5380d04.webp&quot; alt=&quot;&quot; class=&quot;img-fluid&quot;&gt;
  147. &lt;/div&gt;
  148. &lt;/a&gt;
  149. &lt;/div&gt;
  150. &lt;/div&gt;
  151. &lt;script src=&quot;https://code.jquery.com/jquery-3.6.0.slim.min.js&quot;&gt;&lt;/script&gt;
  152. &lt;script src=&quot;https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js&quot;&gt;&lt;/script&gt;
  153. &lt;script src=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js&quot;&gt;&lt;/script&gt;
  154. &lt;/body&gt;
  155. &lt;/html&gt;

<!-- end snippet -->

If I wrap the &lt;div class=&quot;container container-background&quot;&gt; in a div.row then the background image scales.

Furthermore, there is an overlap with the &lt;div class=&quot;row&quot; id=&quot;image-container&quot;&gt;.

In the end the form should have a scaled background image and the &lt;div class=&quot;row&quot; id=&quot;image-container&quot;&gt; should not overlap.

Any suggestions how to scale the background image?

答案1

得分: 1

以下是您提供的内容的中文翻译：

我认为使用网格布局对于您的页面结构会更容易。
您有1列，3行。
第一行是页眉
第二行是带背景的表单
第三行是您的图片
在代码中，您可以随后调整grid-template-row的值，可以使用像素值或百分比：
页眉72像素
表单35%
图片1fr
请注意，网格默认单元格是stretch，这意味着表单单元格的宽度为100％，高度中您放置的值（这里是35％）

  1. <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
  2. .pageContainer {
  3.   display: grid;
  4.   grid-template-columns: 1fr;
  5.   grid-template-rows: 72px 35% 1fr;
  6.   row-gap: 10px;
  7. }
  9. .header {
  10.   background-color: white;
  11.   padding: 20px;
  12. }
  14. .search-input-group {
  15.   display: flex;
  16.   justify-content: center;
  17.   gap: 8px;
  18. }
  20. .container-background {
  21.   background-image: url('https://generations.krea.ai/images/cda5a90c-6128-4b50-aa07-fd0fae51b49b.webp');
  22.   background-size: cover;
  23.   background-position: center;
  24. }
  26. .content-wrapper {
  27.   position: relative;
  28.   z-index: 1;
  29.   padding-top: 50px;
  30.   padding-left: 50px;
  31. }
  1. <div class="pageContainer">
  2.   <div class="header p-3 mb-3 border-bottom sticky-top bg-white">
  3.     <div class="container">
  4.       <div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
  5.         <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>
  6.         <div class="col-md-3 text-end ms-auto">
  7.           <!-- 在这里添加 "ms-auto" 类 -->
  8.           <a href="#" class="btn btn-primary ms-3"> Submit </a>
  9.         </div>
  10.       </div>
  11.     </div>
  12.   </div>
  14.   <div class="container container-background">
  15.     <div class="content-wrapper">
  16.       <form method="GET" action="" class="text-center search-box">
  17.         <div class="row align-items-center">
  18.           <div class="col-9">
  19.             <div class="search-input-group">
  20.               <input type="search" name="search" class="form-control" placeholder="搜索..." value="">
  21.               <button type="submit" class="btn btn-primary">提交</button>
  22.             </div>
  23.           </div>
  24.         </div>
  25.       </form>
  26.       <div class="col-12">
  27.         <div class="mt-1">
  28.           <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>
  29.         </div>
  30.       </div>
  31.     </div>
  32.   </div>
  34.   <div class="row" id="image-container">
  35.     <div class="col-sm-6 col-md-4 col-lg-3 mb-4">
  36.       <a href="">
  37.         <div class="position-relative">
  38.           <img src="https://generations.krea.ai/images/06d734d7-7220-4c61-89b5-aee102b798da.webp" alt="" class="img-fluid">
  39.         </div>
  40.       </a>
  41.     </div>
  42.     <div class="col-sm-6 col-md-4 col-lg-3 mb-4">
  43.       <a href="">
  44.         <div class="position-relative">
  45.           <img src="https://generations.krea.ai/images/06d77c3a-1050-4c39-a33a-a79887f9ffd1.webp" alt="" class="img-fluid">
  46.         </div>
  47.       </a>
  48.     </div>
  49.     <div class="col-sm-6 col-md-4 col-lg-3 mb-4">
  50.       <a href="">
  51.         <div class="position-relative">
  52.           <img src="https://generations.krea.ai/images/06db115d-fae9-48db-bc14-e3ed9cb83427.webp" alt="" class="img-fluid">
  53.         </div>
  54.       </a>
  55.     </div>
  56.     <div class="col-sm-6 col-md-4 col-lg-3 mb-4">
  57.       <a href="">
  58.         <div class="position-relative">
  59.           <img src="https://generations.krea.ai/images/06e1e639-7207-48ef-a2ca-3f4e70b14796.webp" alt="" class="img-fluid">
  60.         </div>
  61.       </a>
  62.     </div>
  63.     <div class="col-sm-6 col-md-4 col-lg-3 mb-4">
  64.       <a href="">
  65.         <div class="position-relative">
  66.           <img src="https://generations.krea.ai/images/06eac403-517e-4159-ab1a-b97bd5380d04.webp" alt="" class="img-fluid">
  67.         </div>
  68.       </a>
  69.     </div>
  70.   </div>
  71. </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 -->

  1. &lt;link href=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot;&gt;.pageContainer {
  2. display: grid;
  3. grid-template-columns: 1fr;
  4. grid-template-rows: 72px 35% 1fr;
  5. row-gap: 10px;
  6. }
  7. .header {
  8. background-color: white;
  9. padding: 20px;
  10. }
  11. .search-input-group {
  12. display: flex;
  13. justify-content: center;
  14. gap: 8px;
  15. }
  16. .container-background {
  17. background-image: url(&#39;https://generations.krea.ai/images/cda5a90c-6128-4b50-aa07-fd0fae51b49b.webp&#39;);
  18. background-size: cover;
  19. background-position: center;
  20. }
  21. .content-wrapper {
  22. position: relative;
  23. z-index: 1;
  24. padding-top: 50px;
  25. padding-left: 50px;
  26. }

<!-- language: lang-html -->

  1. &lt;div class=&quot;pageContainer&quot;&gt;
  2. &lt;div class=&quot;header p-3 mb-3 border-bottom sticky-top bg-white&quot;&gt;
  3. &lt;div class=&quot;container&quot;&gt;
  4. &lt;div class=&quot;d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start&quot;&gt;
  5. &lt;a href=&quot;/&quot; class=&quot;d-flex align-items-center mb-2 mb-lg-0 link-body-emphasis text-decoration-none&quot; style=&quot;font-size: 20px;color: black;&quot;&gt; Test &lt;/a&gt;
  6. &lt;div class=&quot;col-md-3 text-end ms-auto&quot;&gt;
  7. &lt;!-- Add the &quot;ms-auto&quot; class here --&gt;
  8. &lt;a href=&quot;#&quot; class=&quot;btn btn-primary ms-3&quot;&gt; Submit &lt;/a&gt;
  9. &lt;/div&gt;
  10. &lt;/div&gt;
  11. &lt;/div&gt;
  12. &lt;/div&gt;
  13. &lt;div class=&quot;container container-background&quot;&gt;
  14. &lt;div class=&quot;content-wrapper&quot;&gt;
  15. &lt;form method=&quot;GET&quot; action=&quot;&quot; class=&quot;text-center search-box&quot;&gt;
  16. &lt;div class=&quot;row align-items-center&quot;&gt;
  17. &lt;div class=&quot;col-9&quot;&gt;
  18. &lt;div class=&quot;search-input-group&quot;&gt;
  19. &lt;input type=&quot;search&quot; name=&quot;search&quot; class=&quot;form-control&quot; placeholder=&quot;Search...&quot; value=&quot;&quot;&gt;
  20. &lt;button type=&quot;submit&quot; class=&quot;btn btn-primary&quot;&gt;Submit&lt;/button&gt;
  21. &lt;/div&gt;
  22. &lt;/div&gt;
  23. &lt;/div&gt;
  24. &lt;/form&gt;
  25. &lt;div class=&quot;col-12&quot;&gt;
  26. &lt;div class=&quot;mt-1&quot;&gt;
  27. &lt;span class=&quot;badge bg-secondary tag&quot; data-tag=&quot;test1&quot;&gt;Test 1&lt;/span&gt; &lt;span class=&quot;badge bg-secondary tag&quot; data-tag=&quot;test2&quot;&gt;Test 1&lt;/span&gt; &lt;span class=&quot;badge bg-secondary tag&quot; data-tag=&quot;test3&quot;&gt;Test 1&lt;/span&gt;
  28. &lt;/div&gt;
  29. &lt;/div&gt;
  30. &lt;/div&gt;
  31. &lt;/div&gt;
  32. &lt;div class=&quot;row&quot; id=&quot;image-container&quot;&gt;
  33. &lt;div class=&quot;col-sm-6 col-md-4 col-lg-3 mb-4&quot;&gt;
  34. &lt;a href=&quot;&quot;&gt;
  35. &lt;div class=&quot;position-relative&quot;&gt;
  36. &lt;img src=&quot;https://generations.krea.ai/images/06d734d7-7220-4c61-89b5-aee102b798da.webp&quot; alt=&quot;&quot; class=&quot;img-fluid&quot;&gt;
  37. &lt;/div&gt;
  38. &lt;/a&gt;
  39. &lt;/div&gt;
  40. &lt;div class=&quot;col-sm-6 col-md-4 col-lg-3 mb-4&quot;&gt;
  41. &lt;a href=&quot;&quot;&gt;
  42. &lt;div class=&quot;position-relative&quot;&gt;
  43. &lt;img src=&quot;https://generations.krea.ai/images/06d77c3a-1050-4c39-a33a-a79887f9ffd1.webp&quot; alt=&quot;&quot; class=&quot;img-fluid&quot;&gt;
  44. &lt;/div&gt;
  45. &lt;/a&gt;
  46. &lt;/div&gt;
  47. &lt;div class=&quot;col-sm-6 col-md-4 col-lg-3 mb-4&quot;&gt;
  48. &lt;a href=&quot;&quot;&gt;
  49. &lt;div class=&quot;position-relative&quot;&gt;
  50. &lt;img src=&quot;https://generations.krea.ai/images/06db115d-fae9-48db-bc14-e3ed9cb83427.webp&quot; alt=&quot;&quot; class=&quot;img-fluid&quot;&gt;
  51. &lt;/div&gt;
  52. &lt;/a&gt;
  53. &lt;/div&gt;
  54. &lt;div class=&quot;col-sm-6 col-md-4 col-lg-3 mb-4&quot;&gt;
  55. &lt;a href=&quot;&quot;&gt;
  56. &lt;div class=&quot;position-relative&quot;&gt;
  57. &lt;img src=&quot;https://generations.krea.ai/images/06e1e639-7207-48ef-a2ca-3f4e70b14796.webp&quot; alt=&quot;&quot; class=&quot;img-fluid&quot;&gt;
  58. &lt;/div&gt;
  59. &lt;/a&gt;
  60. &lt;/div&gt;
  61. &lt;div class=&quot;col-sm-6 col-md-4 col-lg-3 mb-4&quot;&gt;
  62. &lt;a href=&quot;&quot;&gt;
  63. &lt;div class=&quot;position-relative&quot;&gt;
  64. &lt;img src=&quot;https://generations.krea.ai/images/06eac403-517e-4159-ab1a-b97bd5380d04.webp&quot; alt=&quot;&quot; class=&quot;img-fluid&quot;&gt;
  65. &lt;/div&gt;
  66. &lt;/a&gt;
  67. &lt;/div&gt;
  68. &lt;/div&gt;
  69. &lt;/div&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年5月7日 22:16:21
  • 转载请务必保留本文链接：https://go.coder-hub.com/76194471.html
  • css
  • html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定