所以我有一个分割背景 - 顶部是蓝色的，底部是白色的。我正在使用这种风格来获得分割背景:
//accordion - changes colour on open / close
var selectIds = $('#panel1,#panel2,#panel3');
$(function($) {
selectIds.on('show.bs.collapse hidden.bs.collapse', function() {
$(this).prev().find('.fa').toggleClass('fa-plus fa-minus');
});
$(".panel-heading").find("a[data-toggle=collapse]").on('click', function() {
if ($(this).hasClass('collapsed')) {
$(this).closest('.panel-group').find('.panel-default').removeClass('open');
$(this).closest('.panel-default').addClass('open');
} else {
$(this).closest('.panel-default').removeClass('open');
}
});
});.gradient {
background: -webkit-repeating-linear-gradient(#74ABDD, #74ABDD 49.9%, #498DCB 50.1%, #498DCB 100%);
background: -o-repeating-linear-gradient(#74ABDD, #74ABDD 49.9%, #498DCB 50.1%, #498DCB 100%);
background: -moz-repeating-linear-gradient(#74ABDD, #74ABDD 49.9%, #498DCB 50.1%, #498DCB 100%);
background: repeating-linear-gradient(#18A9E5, #18A9E5 49.9%, #fff 50.1%, #fff 100%);
}
.split {
width: 100%;
/*height:50px;*/
max-height: 25%;
padding: 2% 5% 5% 5%;
}
.solid-white {
background-color: #fff;
padding-top: 10px;
padding-right: 3px;
padding-left: 3px;
padding-bottom: 0!important;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .26);
h2 {
padding-left: 25px;
}
}
.page-section {
border-bottom: 1px solid #ddd;
overflow: hidden;
&.page-section-md {
padding-top: 20px;
padding-bottom: 20px;
}
}
.panel-body-help {
background-color: #616161;
color: white;
}
.panel-default.open {
background-color: #616161;
transition: all 0s;
}
.custom-panel {
.panel-default.open {
> .panel-heading {
color: #fff;
font-weight: bolder;
background: transparent;
}
}
}
.custom-panel {
.panel-default {
> .panel-heading {
background: #fff;
}
}
}
.panel {
margin-bottom: 20px;
background-color: #fff;
border: 1px solid transparent;
border-radius: 4px;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
}
.panel-body {
padding: 15px;
}<section class="page-section page-section-md split gradient">
<div class="row">
<div class="col-md-2">
<h4 class="heading-responsive text-white">
Welcome
</h4>
</div>
</div>
<div class="container wrap-md">
<br />
<br />
<div class="col-md-offset-2 col-md-8 solid-white-help">
<h2 class="heading-responsive thin">Welcome</h2>
<br />
<div class="panel-group custom-panel" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="thin accordion-toggle collapsed text-normalize" data-toggle="collapse" data-parent="#accordion" href="#panel1">
<i class="fa fa-plus text-primary"></i> Get started
</a>
</h4>
</div>
<div id="panel1" class="panel-collapse collapse">
<div class="panel-body panel-body-help">
CONTENT
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="thin accordion-toggle text-normalize" data-toggle="collapse" data-parent="#accordion" href="#panel2"><i class="fa fa-plus text-primary"></i> Utilities</a>
</h4>
</div>
<div id="panel2" class="panel-collapse collapse">
<div class="panel-body panel-body-help">
CONTENT
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="thin accordion-toggle text-normalize" data-toggle="collapse" data-parent="#accordion" href="#panel3"><i class="fa fa-plus text-primary"></i> Organization</a>
</h4>
</div>
<div id="panel3" class="panel-collapse collapse">
<div class="panel-body panel-body-help">
CONTENT
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="thin accordion-toggle text-normalize" data-toggle="collapse" data-parent="#accordion" href="#panel4"><i class="fa fa-plus text-primary"></i> Integrations</a>
</h4>
</div>
<div id="panel4" class="panel-collapse collapse">
<div class="panel-body panel-body-help">
CONTENT
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="thin accordion-toggle text-normalize" data-toggle="collapse" data-parent="#accordion" href="#panel5"><i class="fa fa-plus text-primary"></i> Essentials</a>
</h4>
</div>
<div id="panel5" class="panel-collapse collapse">
<div class="panel-body panel-body-help">
CONTENT
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="thin accordion-toggle text-normalize" data-toggle="collapse" data-parent="#accordion" href="#panel6"><i class="fa fa-plus text-primary"></i> Sales</a>
</h4>
</div>
<div id="panel6" class="panel-collapse collapse">
<div class="panel-body panel-body-help">
CONTENT
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="thin accordion-toggle text-normalize" data-toggle="collapse" data-parent="#accordion" href="#panel7"><i class="fa fa-plus text-primary"></i> Support</a>
</h4>
</div>
<div id="panel7" class="panel-collapse collapse">
<div class="panel-body panel-body-help">
CONTENT
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="thin accordion-toggle text-normalize" data-toggle="collapse" data-parent="#accordion" href="#panel8"><i class="fa fa-plus text-primary"></i> Projects</a>
</h4>
</div>
<div id="panel8" class="panel-collapse collapse">
<div class="panel-body panel-body-help">
CONTENT
</div>
</div>
</div>
</div>
</div>
<br />
</div>
<br />
<br />
</section>因为我在背景中有 Bootstrap 面板，所以当我展开面板时，背景也会移动。 (当我打开面板时，蓝色会向下延伸)。 无论我的背景有多大，如何固定颜色？
https://support.google.com/mail#topic=3394144 <这是一个很好的引用，说明我在扩展面板时背景不动的情况下试图实现的目标。
这可能是一个非常简单的修复，我只是想念它 - 感谢您的帮助! TIA。
最佳答案
蓝色顶部的高度由“.gradient”类中的背景渐变决定(目前顶部 49.9% 为蓝色，底部 50.1% 为白色)。您可以为您的 .split 类指定 100vh 的高度并溢出:滚动。
.split {
width: 100%;
height: 100vh;
overflow: scroll;
padding: 2% 5% 5% 5%;
}
看看这个 fiddle :https://jsfiddle.net/wietsedevries/bk4ogp38/3/
关于html - 拆分背景 - 在面板展开时停止移动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37571312/