У меня есть это изображение, которое я хочу использовать в качестве фона для страницы индекса. Но когда я масштабирую фоновые изображения, они появляются между полями формы, а не уходят за форму, как это должно быть. тело страницы указателя содержит основной элемент, который состоит из в стороне элемента и секции . Секция содержит две формы, одну для логин и другую для , зарегистрируйтесь с двумя кнопками для одного и того же. Для наглядности смотри приведенный ниже код.
1) Основная проблема, с которой я сталкиваюсь, заключается в увеличении масштаба приблизительно до 400%. Фоновое изображение появляется между полями «электронная почта» и «пароль» формы логина (активная) при увеличении. Я хочу, чтобы фоновое изображение действительно находилось в фоновом режиме и оставалось позади всего содержимого main тег, т.е. в основном за всей формой и сторонним изображением.
2) Кроме того, при увеличении изображения вы можете заметить, что кнопка входа или регистрация не отображаются в конце формы, а отображаются посередине с большим пустым пространством под ним. Я хочу, чтобы эти кнопки находились в самом низу формы при увеличении.
3) Наконец, можно также заметить, как верхняя часть изображения svg, которое я использовал в теге aside, обрезается при увеличении и изменении положения. При этом вводный текст под svg также появляется за якорными тегами «LOGIN» и «SIGN UP» при увеличении. Было бы лучше, если бы все они не перекрывались или не обрезались.
P.S.- Я использовал inline svg . Поэтому пропустите или сложите длинный фрагмент кода SVG, чтобы не испытывать мучений. (* Брауни указывает на того, кто может подсказать, как использовать внешний SVG с работающей анимацией. Я пробовал 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);
}
SCREENSHOTS
а. Страница входа без увеличения
б. Страница входа с 500% увеличением
с. Страница входа с увеличением 400%
* * Д тысяча шестьдесят-восемь. Белый странный пробел после входа в систему при 500% увеличении
е. При увеличении вступительный текст идет за якорями LOGIN & REGISTER. Изображение SVG обрезано.
РЕДАКТИРОВАТЬ: - Полный код CSS (за исключением ключевых кадров webkit), см. Ответ ниже. Я также приложил фоновое изображение.