Question

我正在为我的网站标题处理CSS背景渐变，这一直困扰着我好几个小时。我们说我有以下代码：

＆＃13;

html, body, div#page-wrapper {
  width: 100%;
  height: 100%;
  min-width: 100%;
  min-height: 100%;
  background-color: #FFF;
}

div#header {
  width: 100%;
  height: 25%;
  text-align: center;
  margin: 0px auto;
  /* IE10+ */
  background-image: -ms-linear-gradient(bottom, #FFFFFF 0%, #0094FF 100%);
  /* Mozilla Firefox */
  background-image: -moz-linear-gradient(bottom, #FFFFFF 0%, #0094FF 100%);
  /* Opera */
  background-image: -o-linear-gradient(bottom, #FFFFFF 0%, #0094FF 100%);
  /* Webkit (Safari/Chrome 10) */
  background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #FFFFFF), color-stop(100, #0094FF));
  /* Webkit (Chrome 11+) */
  background-image: -webkit-linear-gradient(bottom, #FFFFFF 0%, #0094FF 100%);
  /* W3C Markup */
  background-image: linear-gradient(to top, #FFFFFF 0%, #0094FF 100%);
}

＆＃13;

<div id="page-wrapper">
  <div id="header">
    <div id="logo">
      <a href="http://www.poweruser-studios.tk/" hreflang="en-US">
        <img id="site-logo" src="http://www.poweruser-studios.tk/assets/imagesets/site-logo.png" alt="Official Logo" />
      </a>
    </div>
  </div>
</div>

＆＃13;

由于我努力为我的网站创建响应式设计，我正在使用百分比宽度/高度。因此，如果25%的{{1}}为height我的屏幕，则会得到62px长的渐变。那不是我想要的。我希望渐变适合165px div，而不是超出其范围。因此，如果header的高度为62px，则渐变应调整为62px长。但它并没有。我做错了什么？

顺便说一下，我正在使用HTML Doctor CSS重置。

如何在容器的高度中安装CSS渐变？

0 个答案: