【发布时间】：2019-04-02 19:47:18
【问题描述】：
我有这张我想要的图像作为索引页的背景。但是，当我放大背景图像时，它会出现在表单字段之间，而不是像它应该出现在表单后面。索引页的body 包含一个main 元素，该元素由一个aside 元素和一个section 组成。 部分包含两种形式，一种用于登录，另一种用于注册，并带有两个按钮。为清楚起见，请查看下面给出的代码。
1) 我面临的主要问题是当我放大时，大约在 400% 左右或超过 400%。放大时，背景图像出现在登录表单（活动）的“电子邮件”和“密码”字段之间。我希望背景图像实际上位于背景中，并保持在 main 的所有内容之后 标记，即基本上在整个表单和旁边的图像后面。
2) 此外，当您放大时，您可能会注意到登录或注册按钮不会出现在表单的末尾，而是出现在中间，下方有一个大的空白区域。我希望这些按钮在放大时位于表单的最底部。
3) 最后，人们可能还会注意到我在 side 标签中使用的 svg 图像的上部在放大和重新定位时是如何被切断的。这样，当放大时，svg 下方的介绍文本也会出现在“LOGIN”和“SIGN UP”锚标记的后面。如果它们全部不重叠或不被裁剪会更好。
P.S.- 我使用了内联 svg。因此，请跳过或折叠较长的 svg 代码，以免感到痛苦。（*对于可以建议如何在动画工作中使用外部 svg 的人来说，Brownie 点数。我尝试过 object，embed 和 img 但无济于事*）。
您可以使用任何下载的图像作为背景，只需将其放在 img 文件夹中并将其命名为“bg-index.jpeg”。
HTML/JSP
<!DOCTYPE html>
<html lang="en" >
<head>
<title>Login << Exam Nation</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Take an Exam--Test Yourself | Exam Nation " />
<meta name="keywords" content="exam nation, online examination system, log in, sign up, index, default page, fallback page" />
<meta name="author" content="Akash Das" />
<!--===============================================================================================-->
<script src="https://use.typekit.net/lkh0ago.js"></script>
<!--===============================================================================================-->
<script>try{Typekit.load({ async: true });}catch(e){}</script>
<!--===============================================================================================-->
<link rel="shortcut icon" href="img/icons/favicon.ico" type="image/x-icon">
<!--===============================================================================================-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<!--===============================================================================================-->
<link rel="stylesheet" href="css/style.css">
<!--===============================================================================================-->
</head>
<!--style="background: url(img/bg-index.jpeg) no-repeat center center fixed; background-size: cover; height: 100%; overflow: hidden;"-->
<body>
<main ontouchstart class="with-hover">
<aside>
<div></div>
<svg viewBox="0 0 100 100">
<g stroke="#fff" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path d="M65.892702,73 C70.3362168,68.5836139 73.0845878,62.4824333 73.0845878,55.7432553 C73.0845878,49.0040774 70.3362168,42.9028968 65.892702,38.4865107 C61.4491873,34.0701246 55.3105288,31.338533 48.5299539,31.338533 C41.749379,31.338533 35.6107205,34.0701246 31.1672058,38.4865107 C26.723691,42.9028968 23.97532,49.0040774 23.97532,55.7432553 C23.97532,62.4824333 26.723691,68.5836139 31.1672058,73 C31.1672058,73 65.892702,73 65.892702,73 Z M73.0594097,62.3985471 C76.4680437,61.2200182 88.5607213,56.1793944 85.5117743,37.8371245 L81.6924976,37.9360303 C80.8526284,43.134546 77.152648,46.6051883 72.4845099,46.6051883 M24.4062209,60.319036 C24.3904842,60.3191058 24.3747393,60.3191408 24.3589862,60.3191408 C18.6378761,60.3191408 14,55.70958 14,50.0233985 C14,44.3372171 18.6378761,39.7276563 24.3589862,39.7276563 C26.0569266,39.7276563 27.6594543,40.133673 29.0736464,40.8533508 M65.8946819,38.4867877 L31.1652244,38.4844448 M37.6782363,44.9577899 C34.9010396,47.7180312 33.1833077,51.5312691 33.1833077,55.7432553 C33.1833077,59.9552416 34.9010396,63.7684794 37.6782363,66.5287208 M45.4606247,29.0505903 L51.5992831,29.0505903 M48.5299539,26 L48.5299539,31.338533"></path>
</g>
</svg>
<div>
<p id="intro-signup"><br/>Be a citizen of <strong>Exam Nation</strong> with an account.</p>
<p id="intro-login" class="active"><br/>Welcome back to<br/><strong>Exam Nation</strong>!</p>
</div>
</aside>
<section>
<h1>
<a id="link-login" class="active">Login</a>
<a id="link-signup">Register</a>
</h1>
<form id="form-signup" action="test1.html" method="POST">
<div>
<fieldset>
<div>
<label for="name">Name</label>
<input id="name" name="name" type="text" placeholder="Full Name" required/>
</div>
</fieldset>
<fieldset>
<div>
<label for="email">Email</label>
<input id="email" name="email" type="email" placeholder="abc@xyz.com" required/>
</div>
</fieldset>
<fieldset>
<div>
<label for="password">Password</label>
<input id="password" name="password" type="password" placeholder="••••••••" required/>
</div>
</fieldset>
</div>
<ul>
<li>
<button class="fb">Connect with Facebook</button>
</li>
<li>
<button class="tw">Connect with Twitter</button>
</li>
</ul>
<input type="submit" value="Sign Up"/>
</form>
<form id="form-login" class="active" action="test2.html" method="POST">
<div>
<fieldset>
<div>
<label for="email">Email</label>
<input id="email" name="email" type="email" placeholder="abc@xyz.com" required/>
</div>
</fieldset>
<fieldset>
<div>
<label for="password">Password</label>
<input id="password" name="password" type="password" placeholder="••••••••" required/>
</div>
</fieldset>
</div>
<ul>
<li>
<button class="fb">Connect with Facebook</button>
</li>
<li>
<button class="tw">Connect with Twitter</button>
</li>
</ul>
<input type="submit" value="Log In"/>
</form>
</section>
</main>
<!--===============================================================================================-->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<!--===============================================================================================-->
<script src="js/index.js"></script>
<!--===============================================================================================-->
</body>
</html>
CSS
* {
box-sizing: border-box;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
*:focus {
outline: none !important;
}
body, html {
height: 100%;
}
body {
background: url(../img/bg-index.jpeg) no-repeat center center;
background-size: cover;
height: 100%;
overflow: auto;
margin: 0;
font-family: "brandon-grotesque", "Brandon Grotesque", "Source Sans Pro", "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
color: #857567;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
}
main {
background: white;
height: 100%;
}
main aside {
position: relative;
display: flex;
flex-flow: row wrap;
align-items: center;
align-content: center;
justify-content: center;
height: calc(100% / 3);
padding: 12px;
background: #DFB72C url("../img/table-pc.jpg") no-repeat center center/cover;
}
.
.
.
main aside svg {
position: relative;
margin-top: -24px;
width: 120px;
height: 120px;
}
main aside p {
position: relative;
width: 100%;
padding : 5px;
margin: 0;
color: white;
font-size: 22px;
line-height: 1.2;
text-align: center;
text-shadow: 0 0 10px rgba(133, 117, 103, 0.5);
}
main aside p strong {
font-weight: 700;
}
main section form input[type="submit"] {
display: block;
align-self: flex-end;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 100%;
margin: 0;
border: 0;
border-radius: 0;
font-family: "brandon-grotesque", "Brandon Grotesque", "Source Sans Pro", "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
font-size: 24px;
text-transform: capitalize;
line-height: 2;
background: #DFB72C;
color: white;
cursor: pointer;
}
.
.
.
@media only screen and (min-width: 624px) {
body {
display: flex;
align-items: center;
align-content: center;
justify-content: center;
background: url(../img/bg-index.jpeg) no-repeat center center;
background-size: cover;
height: 100%;
overflow: auto;
}
main {
display: flex;
border-radius: 2px;
overflow: hidden;
height: 100%;
max-height: 370px;
box-shadow: 0 0 10px rgba(56, 54, 53, 0.5);
}
截图
一个。没有缩放的登录页面 b. 500% 缩放的登录页面 c。 400% 缩放的登录页面 d。 500% 缩放登录按钮后的白色奇怪空间 e。放大时，介绍文本位于 LOGIN & REGISTER 锚点后面。 svg 图片被截断。
编辑：- 对于完整的 CSS 代码（减去 webkit-keyframes），请参阅下面的答案。我还附上了背景图片。
【问题讨论】：
-
我只能在 Firefox 中重现该问题，但您有一些负边距顶部（例如在主边 div:not(:empty) 上），以及边的固定高度使背景出现。
-
@StevenKuipers 感谢您的洞察力。您能否借助一些代码为上述背景问题提出一个可行的解决方案？
-
@StevenKuipers 如果你能让我知道如何解决提交按钮（登录和注册）按钮未出现在末尾的问题，那将是蜜汁糖浆放大的表格。当缩放为 500% 时，这看起来很奇怪