CSS DIv是否低于梯度?

时间:2016-07-29 00:06:06

标签: html css

我的网页主体上基本上有一个渐变,导航栏就像应该的那样位于顶部,但是我所拥有的div低于整个渐变。你必须一直向下滚动才能看到div。关于如何在渐变上获得div的任何想法?这是代码:

HTML:

<body>
  {{> navbar}}
  <div id="center">
    <h1>Bobcats Services</h1>
    <h2>Everything you need!</h2>
  </div>
</body>

CSS:

html {
  height: 100%;
}

body {
  height: 100%;
  margin: 0;
  padding: 0;
  background-repeat: no-repeat;
  background-attachment: fixed;

  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#00b7ea+0,009ec3+100;Blue+3D+%2315 */
  background: rgb(0,183,234); /* Old browsers */
  background: -moz-linear-gradient(top,  rgba(0,183,234,1) 0%, rgba(0,158,195,1) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top,  rgba(0,183,234,1) 0%,rgba(0,158,195,1) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom,  rgba(0,183,234,1) 0%,rgba(0,158,195,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b7ea', endColorstr='#009ec3',GradientType=0 ); /* IE6-9 */

}

#center {
  width: 30%;
  padding-bottom: 2em;
  padding-top: 2em;
  margin: auto;
  margin-top: 3em;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  border-style: solid;
  border-radius: 5px;
  border-color: #008fc8;
  font-family: 'Open Sans', sans-serif;
}

0 个答案:

没有答案