CSS3渐变背景设置在身体上不拉伸，而是重复?

好的，假设<body>内的内容的总高为300px。

如果我使用-webkit-gradient或- mz -linear-gradient设置<body>的背景

然后我最大化我的窗口(或者只是让它高于300px)，梯度将恰好是300px高(内容的高度)，然后重复填充窗口的其余部分。

我假设这不是一个bug，因为它在webkit和gecko中都是一样的。

但是有没有办法让渐变拉伸来填充窗口而不是重复?

当前回答

这就是我所做的:

html, body {
height:100%;
background: #014298 ;
}
body {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5c9cf2), color-stop(100%,#014298));
background: -moz-linear-gradient(top, rgba(92,156,242,1) 0%, rgba(1,66,152,1) 100%);
background: -o-linear-gradient(top, #5c9cf2 0%,#014298 100%);

/*I added these codes*/
margin:0;
float:left;
position:relative;
width:100%;
}

在我浮动主体之前，在顶部有一个间隙，它正在显示html的背景色。如果我删除html的bgcolor，当我向下滚动时，梯度被切断。所以我浮动身体，并设置它的位置为相对，宽度为100%。它工作在safari, chrome, firefox, opera, Internet expl..哦,等一下。: P

你们怎么看?

2011-07-18 16:14:55

其他回答

应用下面的CSS:

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

编辑:添加边框:0;到每个注释的body声明(Martin)。

编辑:添加背景附件:固定;到每个注释的体声明(Johe Green)。

2010-05-19 22:55:31

肮脏的;也许你可以添加一个min-height: 100%;到html，和主体标签?或者至少设置一个默认的背景色，它也是渐变结束的颜色。

2010-05-19 20:57:54

这就是我所做的:

html, body {
height:100%;
background: #014298 ;
}
body {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5c9cf2), color-stop(100%,#014298));
background: -moz-linear-gradient(top, rgba(92,156,242,1) 0%, rgba(1,66,152,1) 100%);
background: -o-linear-gradient(top, #5c9cf2 0%,#014298 100%);

/*I added these codes*/
margin:0;
float:left;
position:relative;
width:100%;
}

你们怎么看?

2011-07-18 16:14:55

设置html {height: 100%}会对IE造成严重破坏。这里有一个例子(png)。但你知道什么最有效吗?只要在<html>标签上设置你的背景。

html {
  -moz-linear-gradient(top, #fff, #000);
  /* etc. */
}

背景延伸到底部，没有奇怪的滚动行为发生。您可以跳过所有其他修复。这得到了广泛的支持。我还没有发现一个浏览器不让你应用背景的html标签。它是完全有效的CSS，而且已经有一段时间了。：）

2012-05-11 16:33:50

我在这里很难找到答案。我发现在主体中固定一个全尺寸的div，给它一个负z索引，并附加渐变效果更好。

<style>

  .fixed-background {
    position:fixed;
    margin-left: auto;
    margin-right: auto;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -1000;
    background-position: top center;
    background-size: cover;
    background-repeat: no-repeat;
  }

  .blue-gradient-bg {
    background: #134659; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(top, #134659 , #2b7692); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(bottom, #134659, #2b7692); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(top, #134659, #2b7692); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to bottom, #134659 , #2b7692); /* Standard syntax */
  }

  body{
    margin: 0;
  }

</style>

<body >
 <div class="fixed-background blue-gradient-bg"></div>
</body>

这是完整的样本 https://gist.github.com/morefromalan/8a4f6db5ce43b5240a6ddab611afdc55

2016-04-18 22:20:44

CSS3渐变背景设置在身体上不拉伸，而是重复?

推荐文章

最新文章

标签