限制元素上径向渐变的大小

Question

我有一个宽100％的部分＆amp; 100％高度。我需要100％宽度的放射状梯度（＃5E88B2在中心和＃06305A外部）。它的高度为100px。所以顶部100px和顶部应该有径向梯度。之后，默认颜色（白色）应继续。 我知道如何用线性渐变来实现它。但是，如何用径向梯度来做呢？

＆＃13;

＆＃13;

.Content {
  border-top: 10px solid #666666;
  background-size: 100%;
  background: #5E88B2;
  background: -moz-radial-gradient(center, ellipse cover, #5E88B2 0%, #06305a 100%);
  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #5E88B2));
  background: -webkit-radial-gradient(center, ellipse cover, #5E88B2 0%, #06305a 100%);
  background: -o-radial-gradient(center, ellipse cover, #5E88B2 0%, #06305a 100%);
  background: -ms-radial-gradient(center, ellipse cover, #5E88B2 0%, #06305a 100%);
  background: radial-gradient(ellipse at center, #5E88B2 0%, #06305a 100%);
}
.MainContent{ background-color: #ffffff; border-radius: 5px; margin-top: 3%;margin-left: auto;
margin-right: auto; padding-left: 15px; padding-right: 15px;clear: both;display: table; width:300px;}

＆＃13;

<section style="background-color:#fff;">This is header</section>
<section id="OuterSection" class="container-fluid Content">
  <section class="container MainContent">
    <!-- Main Markup -->
    Content<br>Content<br>Content<br>Content<br>Content<br> Content<br>Content<br>
    Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>
  </section>
</section>
<section style="background-color:#eee;">This is footer</section>

＆＃13;

＆＃13;

＆＃13;

目前正在全力以赴。但是，我需要从＃34; OuterSection＆＃34;

的顶部开始100px高度的径向渐变

Answer 1

您可以使用background-size和background-repeat属性约束背景图片大小。

＆＃13;

＆＃13;

.Content {
  border-top: 10px solid #666666;
  background: #5E88B2;
  background: -moz-radial-gradient(center, ellipse cover, #5E88B2 0%, #06305a 100%);
  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #5E88B2));
  background: -webkit-radial-gradient(center, ellipse cover, #5E88B2 0%, #06305a 100%);
  background: -o-radial-gradient(center, ellipse cover, #5E88B2 0%, #06305a 100%);
  background: -ms-radial-gradient(center, ellipse cover, #5E88B2 0%, #06305a 100%);
  background: radial-gradient(ellipse at center, #5E88B2 0%, #06305a 100%);
  background-size: 100% 100px;
  background-repeat: no-repeat;
}
.MainContent {
  background-color: #ffffff;
  border-radius: 5px;
  margin-top: 3%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;
  clear: both;
  display: table;
  width: 300px;
}

＆＃13;

<section style="background-color: #ffffff;">This is header</section>
<section id="OuterSection" class="container-fluid Content">
  <section class="container MainContent">
    <!-- Main Markup -->
    Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>
    Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>
  </section>
</section>
<section style="background-color: #eeeeee;">This is footer</section>

＆＃13;

＆＃13;

＆＃13;