背景圖像 css/html
[英]Background-image css/html
問題描述
我是前端世界的新手：D。 我想設置登錄頁面的背景，但我無法設置到整個頁面。 它看起來像這樣：
這是我的 html：
<body>
<div class="login" >
<h3>Login </h3>
<form>
<div class="ema-pass">
<label for="email" >Email</label>
<br>
<input required type="text" style="border-radius: 5px;">
<br>
<label for="password" >Password</label>
<br>
<input type="password" style="border-radius: 5px;">
</div>
<button>Login</button>
<br>
<p>Or sign in with</p>
<div class="google-sign-in">
<div class="col-md-3">
<a class="btn-outline-dark" href="/users/googleauth" role="button" style="text-transform:none">
<img width="20px" style="margin-bottom:3px; margin-right:5px" alt="Google sign-in" src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Google_%22G%22_Logo.svg/512px-Google_%22G%22_Logo.svg.png" />
</a>
</div>
</div>
<span>Don't have an account?
<a routerLink="/signUp">signUp</a></span>
</form>
</div>
</body>
Css 部分問題出在哪里：
body{
background: #4261cf;
background: -moz-linear-gradient(45deg, #3023ae 0%, #53a0fd 100%);
background: -webkit-gradient(linear, left bottom, right top, color-stop(0%, #3023ae), color-stop(100%, #53a0fd));
background: -webkit-linear-gradient(45deg, #3023ae 0%, #53a0fd 100%);
background: -o-linear-gradient(45deg, #3023ae 0%, #53a0fd 100%);
background: -ms-linear-gradient(45deg, #3023ae 0%, #53a0fd 100%);
background: linear-gradient(45deg, #3023ae 0%, #53a0fd 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$gradient-start', endColorstr='$gradient-end',GradientType=1 );
color: white;
}
.login {
margin: 400px auto;
text-align: center;
max-width: 400px;
border-radius: 10px;
letter-spacing: 0.5px;
line-height: 55px;
font-family: 'Comic Sans MS';
box-shadow: 1px 0px 10px 3px;
z-index: 1;
}
我試圖改變.login { margin: 400px auto; margin: 0 auto; 但不適合我，因為它不在頁面中心。
2 個解決方案
解決方案1
1 已采納 2022-04-01 10:19:11
嘗試這樣做：從 the.login div 中刪除邊距，這允許 backgorund 覆蓋屏幕，然后在 the.login div 周圍添加一個父 div，並將 the.login div 集中設置為該 div。
這是我所做的：
<body>
<div class="parentLogin">
<div class="login" >
<h3>Login </h3>
<form>
<div class="ema-pass">
<label for="email" >Email</label>
<br>
<input required type="text" style="border-radius: 5px;">
<br>
<label for="password" >Password</label>
<br>
<input type="password" style="border-radius: 5px;">
</div>
<button>Login</button>
<br>
<p>Or sign in with</p>
<div class="google-sign-in">
<div class="col-md-3">
<a class="btn-outline-dark" href="/users/googleauth" role="button" style="text-transform:none">
<img width="20px" style="margin-bottom:3px; margin-right:5px" alt="Google sign-in" src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Google_%22G%22_Logo.svg/512px-Google_%22G%22_Logo.svg.png" />
</a>
</div>
</div>
<span>Don't have an account?
<a routerLink="/signUp">signUp</a></span>
</form>
</div>
</div>
</body>
body{
background: #4261cf;
background: -moz-linear-gradient(45deg, #3023ae 0%, #53a0fd 100%);
background: -webkit-gradient(linear, left bottom, right top, color-stop(0%, #3023ae), color-stop(100%, #53a0fd));
background: -webkit-linear-gradient(45deg, #3023ae 0%, #53a0fd 100%);
background: -o-linear-gradient(45deg, #3023ae 0%, #53a0fd 100%);
background: -ms-linear-gradient(45deg, #3023ae 0%, #53a0fd 100%);
background: linear-gradient(45deg, #3023ae 0%, #53a0fd 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$gradient-start', endColorstr='$gradient-end',GradientType=1 );
color: white;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
.login {
text-align: center;
max-width: 400px;
border-radius: 10px;
letter-spacing: 0.5px;
line-height: 55px;
font-family: 'Comic Sans MS';
box-shadow: 1px 0px 10px 3px;
z-index: 1;
}
.parentLogin{
display: flex;
justify-content: center;
align-items: center;
}
解決方案2
0 2022-04-01 10:14:45
解決這個問題的一種方法是將背景設置為用background-size: cover;填滿整個屏幕。 讓它覆蓋整個身體。 然后你可以將background-attachment設置為fixed 。 這樣您就不會看到從屏幕頂部到底部的漸變過渡，而是在您滾動瀏覽時它只會填充 100% 的視口。
用於演示目的的帶有3000px元素的示例片段：
body { background: #4261cf; background: -moz-linear-gradient(45deg, #3023ae 0%, #53a0fd 100%); background: -webkit-gradient( linear, left bottom, right top, color-stop(0%, #3023ae), color-stop(100%, #53a0fd)); background: -webkit-linear-gradient(45deg, #3023ae 0%, #53a0fd 100%); background: -o-linear-gradient(45deg, #3023ae 0%, #53a0fd 100%); background: -ms-linear-gradient(45deg, #3023ae 0%, #53a0fd 100%); background: linear-gradient(45deg, #3023ae 0%, #53a0fd 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$gradient-start', endColorstr='$gradient-end', GradientType=1); color: white; background-repeat: no-repeat; background-attachment: fixed; background-size: cover; }.login { margin: 400px auto; text-align: center; max-width: 400px; border-radius: 10px; letter-spacing: 0.5px; line-height: 55px; font-family: "Comic Sans MS"; box-shadow: 1px 0px 10px 3px; z-index: 1; }.large-content { width: 100%; height: 3000px; }
<body> <div class="login"> <h3>Login </h3> <form> <div class="ema-pass"> <label for="email">Email</label> <br> <input required type="text" style="border-radius: 5px;"> <br> <label for="password">Password</label> <br> <input type="password" style="border-radius: 5px;"> </div> <button>Login</button> <br> <p>Or sign in with</p> <div class="google-sign-in"> <div class="col-md-3"> <a class="btn-outline-dark" href="/users/googleauth" role="button" style="text-transform:none"> <img width="20px" style="margin-bottom:3px; margin-right:5px" alt="Google sign-in" src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Google_%22G%22_Logo.svg/512px-Google_%22G%22_Logo.svg.png" /> </a> </div> </div> <span>Don't have an account? <a routerLink="/signUp">signUp</a></span> </form> <div class="large-content"></div> </div> </body>
您可以選擇在表格上放置一個max-height ，這樣它就不會拉伸太多。 它需要 100% 的視圖高度減去您設置的 800 像素margin (400 像素 + 400 像素)。
HTML和CSS背景圖片
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.