我有一个用 CSS 制作的对 Angular 线页面，使用线性渐变。
background: -webkit-linear-gradient(-63.5deg, #999cdb 50%, #f6bdbd 50%);
这将从右上角到左下角形成一条对 Angular 线。问题是，当用户单击我的登录/注册表单时，模型会更改其高度。因此，对 Angular 线不会重新计算其定位。线性渐变会重复出现，这很丑陋。
有谁知道如何让它重新计算定位？我已经尝试了很多但没有成功。谢谢。
这是 HTML 代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sweety & Co. Pro</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<!--<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>-->
<link href='//fonts.googleapis.com/css?family=Source+Sans+Pro:400,300,600,700,900' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="../static/css/style_pages.css">
<link rel="stylesheet" href="../static/css/sign-in-up.css">
<style>
#body {
display: block;
padding: 1%;
margin-bottom: 20px;
padding-bottom: 20px;
}
</style>
</head>
<body>
<div id="con">
<div id="header">
<a href="#"><img src="../static/img/logo.svg" width="314" height="81"> </a>
</div>
<div id="body">
<div class="wrapper">
<div class="">
<ul class="tab-group">
<!--<li style="z-index: 7;"><span class="underline"><a href="#"><span>link</span></a> </span> </li>-->
<li class="tab active"><a id="asignin" href="#login"><span>SIGN IN</span></a></li>
<li class="tab"><a id="asignup" href="#signup"><span>SIGN UP</span></a></li>
</ul>
</div>
<div class="tab-content">
<div id="login">
<form>
<div class="container">
<div class="inputfield">
<input type="email" id="email-login" required>
<label for="email-login">Email</label>
</div>
<div class="inputfield">
<input type="password" id="password-login" required>
<label for="password-login">Password</label>
</div>
<div class="inputfield ">
<input class='toggle' type="checkbox" name='check-4'>
<p style="display: inline; margin-left: 5px" > <b>Keep me Signed in</b></p>
</div>
<div class="inputfield">
<!--<button type="button" class="btn btn-primary btn-lg btn-block">SIGN IN</button>-->
<!--<a role="button" type="submit">SIGN IN</a>-->
<input type="submit" value="SIGN IN">
</div>
</div>
</form>
</div>
<div id="signup">
<div class="splash">
<h2>Get your time and money on track</h2>
<h1>$9.90 </h1><h2>/month</h2>
</div>
<form>
<div class="container">
<div class="inputfield halfwidth">
<input type="text" id="firstname" required>
<label for="firstname">First Name</label>
</div>
<div class="inputfield halfwidth">
<input type="text" id="lastname" required>
<label for="lastname">Last Name</label>
</div>
<div class="inputfield">
<input type="email" id="email" required>
<label for="email">Email</label>
</div>
<div class="inputfield halfwidth">
<input type="password" id="password" required>
<label for="Password">Password</label>
</div>
<div class="inputfield halfwidth">
<input type="password" id="re-password" required>
<label for="Re-Password">Re-Password</label>
</div>
<div class="inputfield halfwidth">
<div class="select-wrapper select--white">
<select name="demo">
<option value="freelancer" selected>freelancer</option>
<option value="small">small company (1-10)</option>
<option value="medium">medium company (11-50)</option>
</select>
</div>
</div>
<div class="inputfield halfwidth">
<div class="controls">
<input class='toggle' type="checkbox" name='check-4'>
</div>
<div id="terms"> <p>Accept <a href="#terms">terms</a> and conditions.</p>
</div>
</div>
</div>
</form>
<div id="basebtpay">
<div id="btpay"><img src="../static/img/paypal.png"></div>
</div>
</div>
</div>
</div>
</div>
<div id="footer">
<img src="../static/img/sco.svg" width="129" height="79">
</div>
</div>
<script src="../static/js/index.js"></script>
</body>
</html>
这是 CSS:
html{
height: 100%;
}
body {
/*height: 100%;*/
font-size: 62.5%;
margin:0;
padding:0;
-ms-text-size-adjust: none;
-moz-text-size-adjust: none;
-o-text-size-adjust: none;
-webkit-text-size-adjust: none;
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
background-repeat: no-repeat;
background-attachment: fixed;
}
body {
}
h1, h2, h3, h4, h5, h6 { /*reset for mobile browsers */
-webkit-font-smoothing: antialiased !important;
}
body {
position: relative;
background: #B3DCEC;
/*background: -moz-linear-gradient(-63.5deg, #999cdb 50%, #f6bdbd 50%);*/
/*background: -webkit-gradient(linear, left top, right bottom, color-stop(50%, #999cdb), color-stop(50%, #f6bdbd), );*/
/*background: -webkit-linear-gradient(-63.5deg, #999cdb 50%, #f6bdbd 50%);*/
/*background: -o-linear-gradient(-63.5deg, #999cdb 50%, #f6bdbd 50%);*/
/*background: -ms-linear-gradient(-63.5deg, #999cdb 50%, #f6bdbd 50%);*/
background: -webkit-linear-gradient(top left, #999cdb 50%, #f6bdbd 50%);
background: -moz-linear-gradient(top left, #999cdb 50%, #f6bdbd 50%);
background: -o-linear-gradient(top left, #999cdb 50%, #f6bdbd 50%);
background: linear-gradient(to bottom right, #999cdb 50%, #f6bdbd 50%);
/*background: linear-gradient(-63.5deg, #999cdb 50%, #f6bdbd 50%);*/
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#999cdb', endColorstr='#f6bdbd', GradientType=1);
font-family: 'Montserrat';
font-size: 1.4rem; /* =14px */
}
#container {
min-height:100%;
position:relative;
}
#header {
padding:20px;
}
#body {
display: block;
padding: 5%;
margin-bottom: 200px;
padding-bottom: 150px;
}
#footer {
position: relative;
text-align: center;
bottom: 0;
display: block;
width: 100%;
background: none;
color: #003;
margin-top: 30px;
height: 100px;
}
#footer img {
width: 100%;
padding-top: 20px;
display: inline-block;
}
p {font-family: 'Montserrat'; font-size: 1.4rem;
color:#fff;}
a { color:#9A9ADD;
text-decoration:underline;}
.clear {clear:both;}
.inspiration {
color: rgba(255, 255, 255, .8);
font-size: 18px;
font-weight: 500;
padding-bottom: 32px;
text-align: center;
}
.inspiration a {color: rgba(255, 255, 255, .8);}
.inspiration a:hover {color: rgba(255, 255, 255, .5);}
.inspiration a:active {color: rgba(255, 255, 255, .3);}
.splash-left h1 {
letter-spacing: -1rem;
font-family: 'montserrat';
font-weight: bold;
color: #fff;
line-height: 9rem;
font-size: 11.4rem;
}
.splash-left {
margin: 5%;
display: inline-block;
padding-bottom: 0%;
position: relative;
width: 30%;
}
.splash {
padding: 50px;
font-family: 'Source Sans Pro';
font-weight: bold;
color: #fff;
padding-bottom: 2%;
margin: auto;
position: relative;
width: 600px;
}
.wrapper {
background: #282731;
border-radius: 1px;
box-sizing: border-box;
-webkit-box-shadow: 22px 17px 58px 3px rgba(89,51,51,0.59);
-moz-box-shadow: 22px 17px 58px 3px rgba(89,51,51,0.59);
box-shadow: 22px 17px 58px 3px rgba(89,51,51,0.59);
margin: auto;
position: relative;
max-width: 600px;
width: 100%;
}
h1 {
font-family: 'Montserrat';
font-size: 12.4rem;
line-height: 100%;
margin: initial;
letter-spacing: -1rem;
font-weight: 800;
}
h2 {
font-family: 'Montserrat';
font-weight: 700;
font-size: 3.0rem;
line-height: 100%;
letter-spacing: -0.2rem;
margin: initial;
}
h3 {
color: rgba(0, 0, 0, .6);
font-size: 1em;
font-weight: 400;
}
.textform {
border: solid 0px;
width: 245px;
height: 30px;
border-radius: 3px;
padding-left: 10px;
margin-right: 20px;
margin-bottom: 20px; }
form {}
.button {
background: #999CDB;
border: none;
color: #fafafa;
cursor: pointer;
font-size: 13px;
font-weight: 400;
border-radius: 40px;
margin-top: 5%;
padding: 16px;
display: inline-block;
width: initial;
text-decoration: none;
}
.button:hover {
background: #fff;
border: none;
color: rgb(40, 39, 49);
cursor: pointer;
font-size: 13px;
font-weight: 400;
border-radius: 40px;
margin-top: 5%;
padding: 16px;
display: inline-block;
width: initial;
text-decoration:none;
}
#btpay {
position: relative;
margin-top: 10px;
border-radius: 25px;
background: #FFC520;
padding: 5px;
width: 250px;
margin: auto;
text-align: center;
font-size: 14px;
cursor: pointer;
}
#basebtpay {
background-color:#353442;
padding:20px;}
.button:focus {
border: none;
color: rgba(0,0,0,.6);
outline: none;
}
.button:hover {
border: none;
color: rgba(0,0,0,.6);
}
.button:active {color: rgba(0,0,0,.8);}
.container {
box-sizing: border-box;
font-size: 0;
padding: 16px 48px 32px;
position: relative;
max-width: 100%;
width: 100%;
}
.photo {
background-image: url(https://pmcdeadline2.files.wordpress.com/2015/01/margot-robbie-good-photo.jpg?w=340&h=299&crop=1);
background-size: cover;
border-radius: 120px;
border: solid #FFF 8px;
height: 120px;
margin: auto;
margin-top: -85px;
text-align: center;
width: 120px;
}
.inputfield {
display: inline-block;
position: relative;
width: 100%;
}
.inputfield.halfwidth {width: 50%;}
input {
border: none;
border-bottom: solid 1px #F6BDBD;
box-sizing: border-box;
color: #F6BDBD;
font-size: 20px;
font-weight: 500;
line-height: 2;
background-color: #282731;
margin: 24px 0;
padding-right: 8px;
width: 100%;
}
input:focus {
border-bottom: solid 1px #F6BDBD;
outline: none;
}
label {
color: #F6BDBD;
font-size: 16px;
font-weight: 500;
left: 0px;
position: absolute;
text-transform: uppercase;
top: 32px;
transition: ease all .4s;
}
input:valid + label {
color: #9E9E9E;
font-size: 14px;
font-weight: 400;
top: 8px;
}
input:focus + label,
input:active + label {
color: #fff;
font-size: 14px;
font-weight: 500;
top: 8px;
}
#terms {
position: absolute;
margin-left: 67px;
margin-top: -24px; }
#terms p {
font-size:12px; }
/*FANCY CHECKER*/
div.controls {
border: 0px;
padding: 0px;
top: 10px;
position: relative;
margin-bottom: 0px;
}
div.controls h1 {
font-size: 18px;
font-weight: 400;
line-height: 1;
text-transform: uppercase;
display: inline-block;
position: absolute;
left: 10px;
top: -10px;
padding: 0 10px;
color: #fafafa;
background-color: #54bded;
}
input[type='radio'],
input[type='checkbox'] {
display: none;
cursor: pointer;
}
input[type='radio']:focus, input[type='radio']:active,
input[type='checkbox']:focus,
input[type='checkbox']:active {
outline: none;
}
input[type='radio'] + label,
input[type='checkbox'] + label {
cursor: pointer;
display: inline-block;
position: relative;
padding-left: 25px;
margin-right: 10px;
color: #0b4c6a;
}
input[type='radio'] + label:before, input[type='radio'] + label:after,
input[type='checkbox'] + label:before,
input[type='checkbox'] + label:after {
content: '';
font-family: helvetica;
display: inline-block;
width: 18px;
height: 18px;
left: 0;
bottom: 0;
text-align: center;
position: absolute;
}
input[type='radio'] + label:before,
input[type='checkbox'] + label:before {
background-color: #fafafa;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
input[type='radio'] + label:after,
input[type='checkbox'] + label:after {
color: #fff;
}
input[type='radio']:checked + label:before,
input[type='checkbox']:checked + label:before {
-moz-box-shadow: inset 0 0 0 10px #158EC6;
-webkit-box-shadow: inset 0 0 0 10px #158EC6;
box-shadow: inset 0 0 0 10px #158EC6;
}
/*Radio Specific styles*/
input[type='radio'] + label:before {
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
}
input[type='radio'] + label:hover:after, input[type='radio']:checked + label:after {
content: '\2022';
position: absolute;
top: 0px;
font-size: 19px;
line-height: 15px;
}
input[type='radio'] + label:hover:after {
color: #c7c7c7;
}
input[type='radio']:checked + label:after, input[type='radio']:checked + label:hover:after {
color: #fff;
}
/*Checkbox Specific styles*/
input[type='checkbox'] + label:before {
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
input[type='checkbox'] + label:hover:after, input[type='checkbox']:checked + label:after {
content: "\2713";
line-height: 18px;
font-size: 14px;
}
input[type='checkbox'] + label:hover:after {
color: #c7c7c7;
}
input[type='checkbox']:checked + label:after, input[type='checkbox']:checked + label:hover:after {
color: #fff;
}
/*Toggle Specific styles*/
input[type='checkbox'].toggle {
border: none;
display: inline-block;
-webkit-appearance: none;
-moz-appearance: none;
margin: 0px;
appearance: none;
width: 55px;
height: 28px;
background-color: #fafafa;
position: relative;
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
border-radius: 30px;
@inlcude box-shadow(none);
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
input[type='checkbox'].toggle:hover:after {
background-color: #c7c7c7;
}
input[type='checkbox'].toggle:after {
content: '';
display: inline-block;
position: absolute;
width: 24px;
height: 24px;
background-color: #aeaeae;
top: 2px;
left: 2px;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
input[type='checkbox']:checked.toggle {
-moz-box-shadow: inset 0 0 0 15px #158EC6;
-webkit-box-shadow: inset 0 0 0 15px #F6BDBD;
box-shadow: inset 0 0 0 15px #F6BDBD;
}
input[type='checkbox']:checked.toggle:after {
left: 29px;
background-color: #282731;
}
/*CUSTOM SELECT*/
*, *:after, *:before {
box-sizing: border-box;
}
.position-center {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
.position-center .select-wrapper {
margin: 0 20px;
}
/*******************************
Styles to copy
*******************************/
/*
* Basic resets for select element
*/
.select-wrapper select {
width: auto;
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
appearance: none;
border: none;
outline: none;
border-radius: 0;
/*IOS*/
}
.select-wrapper select::-ms-expand {
display: none;
/*IE10*/
}
/*
* Global styles
*/
.select-wrapper {
display: inline-block;
position: relative;
}
.select-wrapper:after {
content: '';
position: absolute;
height: 100%;
right: 0;
top: 0;
pointer-events: none;
background-position: left center;
}
.select-wrapper:before {
content: '';
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
line-height: 1;
pointer-events: none;
text-align: center;
z-index: 2;
}
/*******************************
White theme
*******************************/
.select--white {
/*
* Customize options
*/
/*
* Hover styles
*/
/*
* Select element
*/
}
.select--white:after, .select--white select {
color: black;
background-color: #fff;
-webkit-transition: 100ms all cubic-bezier(0.25, 0.46, 0.45, 0.94);
transition: 100ms all cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.select--white:after {
width: 35px;
border: 1px solid #000;
border-radius: 0 20px 20px 0;
border-left: 0;
}
.select--white:before {
color: black;
right: 20px;
font-size: 15px !important;
font-family:Arial, Helvetica, sans-serif;
content: '\2193';
}
.select--white:hover:after, .select--white:hover select {
background-color: #e6e6e6;
}
.select--white select {
padding: 10px 20px;
font-size: 12px;
padding-right: 75px;
border: 1px solid #000;
border-radius: 20px;
color: black;
}
/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* Styles */
.inputfield.halfwidth {width: 100% !important;}
.wrapper {
background: #282731;
border-radius: 1px;
box-sizing: border-box;
-webkit-box-shadow: 22px 17px 58px 3px rgba(89,51,51,0.59);
-moz-box-shadow: 22px 17px 58px 3px rgba(89,51,51,0.59);
box-shadow: 22px 17px 58px 3px rgba(89,51,51,0.59);
margin-right:0px;
position: relative;
max-width: 450px;
width: 100%;
}
}
@media only screen and (max-width : 321px) {
}
/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) and (max-width : 768px) {
.box {
width: 94% !important;
min-width: 270px !important;
border: solid 12px;
border-color: white;
margin-right: 2%;
float: left;
padding: 20px;
min-height: 180px !important;
margin-top: 4%;
font-size: 16px;
line-height: 15px;
cursor: pointer;
}
#hello h1 {color:#222;
font-size: 6rem !important;
letter-spacing: -.5rem;
line-height: 5rem;
}
.hello-boy {display:none !important; }
.button {
background: #999CDB;
border: none;
color: #fafafa;
cursor: pointer;
font-size: 13px;
font-weight: 400;
border-radius: 40px;
margin:0px;
margin-top: 5%;
padding: 16px;
display: inline-block;
width: initial;
text-decoration: none;
}
.button:hover {
background: #fff;
border: none;
color: rgb(40, 39, 49);
cursor: pointer;
font-size: 13px;
font-weight: 400;
border-radius: 40px;
margin:0px;
margin-top: 5%;
padding: 16px;
display: inline-block;
width: initial;
text-decoration:none;
}
#body {
padding: 13%;
}
.splash-left {
margin: 5%;
display: inline-block;
padding-bottom: 0%;
position: relative;
width: 90%;
}
.hello-boy {display:none;}
.splash-left h1 {
letter-spacing: -.5rem;
font-family: 'montserrat';
font-weight: bold;
margin-left: 0px;
color: #fff;
max-width: 100%;
width: 200px;
font-size: 9rem;
line-height: 7rem;
}
.inputfield.halfwidth {width: 100% !important;}
.splash {
font-family: 'Source Sans Pro';
font-weight: bold;
color: #fff;
padding-bottom: 5%;
margin: 0px;
position: relative;
width: 300px;
}
.wrapper {
background: #282731;
border-radius: 1px;
box-sizing: border-box;
-webkit-box-shadow: 22px 17px 58px 3px rgba(89,51,51,0.59);
-moz-box-shadow: 22px 17px 58px 3px rgba(89,51,51,0.59);
box-shadow: 22px 17px 58px 3px rgba(89,51,51,0.59);
position: relative;
max-width: 450px;
width: 100%;
}
h1 {
font-family:'Montserrat';
font-size: 8.4rem;
line-height: 100%;
margin: initial;
}
h2 {
font-family: 'Montserrat';
font-size: 2rem;
line-height: 100%;
margin: initial;
margin-top: 20px;
letter-spacing: -1px;
}
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
.inputfield.halfwidth {width: 100% !important;}
.hello-boy {display:none !important; }
/* Styles */
}
/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
.inputfield.halfwidth {width: 100% !important;}
/* Styles */
}
/**********
iPad 3
**********/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}
/* Desktops and laptops ----------- */
@media only screen and (min-width: 321px) and (max-width: 1024px) {
#menu {display:none;} }
@media only screen and (min-width: 321px) and (max-width: 1600px) {
.box {
width: 30% !important;
min-width: 160px;
border: solid 12px;
border-color: white;
margin-right: 2%;
float: left;
padding: 20px;
height: 180px !important;
margin-top: 4%;
display: inline-block;
font-size: 16px;
line-height: 15px;
cursor: pointer;
}
}
Images:
最佳答案
我认为如果你的宽度或高度可以改变，那么固定度数就不行了。您需要它与大小相关。
可以这样使用:
background: -webkit-linear-gradient(top left, #999cdb 50%, #f6bdbd 50%);
background: -moz-linear-gradient(top left, #999cdb 50%, #f6bdbd 50%);
background: -o-linear-gradient(top left, #999cdb 50%, #f6bdbd 50%);
background: linear-gradient(to bottom right, #999cdb 50%, #f6bdbd 50%);
关于css - 页面上的重复线性渐变，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38706000/