Question

当我尝试在体内放置大型颜色并不能将我带入体内时，我遇到了以下问题：如果窗口在图像出现两种颜色阴影时带有音，则所有样式只能将我捕捉到一定的大小，我想获取体内颜色的整个背景。这是可能的？这是我使用的代码。

lang-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>

Answer 1

您可以将sentry:9.0-onbuild更改为height: 100%;

但是，当您开始滚动时，这不能解决您的问题

我个人会这样：

height: 100vh;

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!

它的作用是将您的身高设置为height: 100vh; background-attachment: fixed;。这将意味着屏幕上的 View Height （视图高度）等于机身尺寸。

然后100vh进行设置，使背景像固定位置的图像或div一样起作用。这意味着背景将保持在滚动位置上。

我为什么要使用一堆background-attachment: fixed;

我本可以使用<br />进行滚动。但是，这仍然无法解决他的问题。他将仍然需要100vh。解决该问题。

如何

您可以将以下内容添加到正文CSS min-height: 400vh; / background-size: 100vw 100vh; / background-size: 100% 100%;中，这意味着可以添加background-size: cover;

因此更简洁：

min-height: 400vh;

使用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; }更好，因为它比Background-size:更具浏览器支持，请参见Can I Use (Background-size) | Can I Use (Vh)

进一步阅读：

https://www.w3schools.com/cssref/pr_background-attachment.asp

Answer 2

Codepen查看结果： https://codepen.io/nemanjaglumac/pen/eQQMda

代码本身：

<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;
}

进一步阅读： MDN: CSS Background

我怎样才能放入全身背景色CSS

2 个答案: