我怎样才能放入全身背景色CSS
[英]how can i put in all body background color css
问题描述
I have the following problem when trying to place in the body the great color does not take me in the body all the style only captures me to a certain size, if the window has scrooll as the image comes out two shades of colors, I would like to get the whole background of the color in the body. 
当尝试在体内放置大型颜色并不能将我带入体内时，我遇到以下问题：所有样式都只能将我捕获到一定的大小，如果当图像出现两种颜色的阴影时，窗口上有声，我会喜欢获得体内颜色的整个背景。 it's possible? 这是可能的？ This is my code used. 这是我使用的代码。
lang-css 郎CSS
body { background: repeating-linear-gradient(-155deg, #ea4853, rgba(125, 44, 160, 0.9)); background-repeat: repeat; width: 100%; min-height: 400vh; background-size: cover; background-attachment: fixed; }
<div class="center-content"> <div class="flex-column" style="margin-top: 50px;"> <div class="container"> <div class="row justify-content-center"> <div class="col-md-12"> <div class="card"> <h1>Historial </h1> <div class="card-body" style="margin-top: -90px;"> <div class="row"> <div class="col-md-6" style="margin-top: 80px;"> <div style="display: block;"> <canvas baseChart width="400" height="300" [datasets]="lineChartData" [labels]="lineChartLabels" [options]="lineChartOptions" [colors]="lineChartColors" [legend]="lineChartLegend" [chartType]="lineChartType" (chartHover)="chartHovered($event)" (chartClick)="chartClicked($event)"></canvas> </div> </div> <div class="col-md-6 table-log"> <table class="table table-responsive table-condensed"> <tr> <th *ngFor="let label of lineChartLabels">{{label}}</th> </tr> <tr *ngFor="let d of lineChartData"> <td *ngFor="let label of lineChartLabels; let j=index">{{d && d.data[j]}}</td> </tr> </table> </div> </div> </div> </div> </div> </div> </div> </div> </div>
2 个解决方案
解决方案1
0 已采纳 2018-11-29 14:34:20
You could change your height: 100%; 您可以更改height: 100%; to height: 100vh; 达到height: 100vh;
However this wont solve your issue when you start scrolling 但是，当您开始滚动时，这无法解决您的问题
I Personally would do it like so: 我个人会这样：
body { background: repeating-linear-gradient(-155deg, #ea4853, rgba(125, 44, 160, 0.9)); background-repeat: repeat; width: 100%; height: 100vh; background-attachment: fixed; }
<h1> HI!</h1> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <br /> <br /><br /><br /><br /><br /><br /> Oooooh Yeaaa!
Here are the fundemantal amendments. 这是基本原则修正案。
height: 100vh;
background-attachment: fixed;
What it does is set your height of the body to 100vh . 它的作用是将您的身体高度设置为100vh 。 This will mean what ever the View Height of the screen is it will equal the body size. 这意味着屏幕的“ 查看高度 ”将等于主体尺寸。
Then background-attachment: fixed; 然后进行background-attachment: fixed; Makes it so the background acts like an image or a div that's position fixed. 使其具有背景，就像固定位置的图像或div一样。 It means the background will stay in that position on scroll. 这意味着背景将保持在滚动位置上。
Why did i use a bunch of
<br /><br />
I could have used min-height: 400vh; 我本可以使用min-height: 400vh; to make scroll. 使滚动。 However this still wouldn't have fixed his issue. 但是，这仍然无法解决他的问题。 He would need to still have 100vh. 他将仍然需要100vh。 to fix the issue. 解决此问题。
HOWEVER 然而
You could add the following to body css background-size: 100vw 100vh; 您可以在body CSS的background-size: 100vw 100vh;添加以下内容background-size: 100vw 100vh; / background-size: 100% 100%; / background-size: 100% 100%; / background-size: cover; / background-size: cover; which would mean min-height: 400vh; min-height: 400vh; could be added 可以添加
Thus a tidier verison: 因此，比较简洁的版本：
body { background: repeating-linear-gradient(-155deg, #ea4853, rgba(125, 44, 160, 0.9)) no-repeat; width: 100%; min-height: 400vh; background-size: cover; background-attachment: fixed; }
Using Background-size: Is better as it has much more support browser wise over vh > See Can I Use (Background-size) | 使用Background-size:更好，因为它比vh具有更多支持浏览器的功能>请参阅我可以使用（Background-size） | Can I Use (Vh) 我可以使用（Vh）
Some further Reading: 一些进一步的阅读：
https://www.w3schools.com/cssref/pr_background-attachment.asp https://www.w3schools.com/cssref/pr_background-attachment.asp
解决方案2
0 2018-11-29 14:48:30
Codepen to see the result: https://codepen.io/nemanjaglumac/pen/eQQMda Codepen查看结果： https ://codepen.io/nemanjaglumac/pen/eQQMda
And the code itself: 和代码本身：
<body>
<div>Just a spacer</div>
</body>
$colorPrimary: hsla(282, 57%, 40%, 0.9);
$colorSecundary: hsla(356, 79%, 60%, 1);
body {
width: 100vw;
min-height: 100vh;
background: linear-gradient(-155deg, $colorSecundary, $colorPrimary) no-repeat ;
background-size: cover;
}
div {
height: 110vh;
}
Further reading: MDN: CSS Background 进一步阅读： MDN：CSS背景
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.