body 上设置的 CSS3 渐变背景不会拉伸(stretch)而是重复?

标签 css gradient

ok说<body>里面的内容总高度为 300 像素。

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

然后我最大化我的窗口(或者只是让它高于 300 像素)渐变将正好是 300 像素高(内容的高度)并且重复以填充窗口的其余部分。

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

但是有没有办法让渐变拉伸(stretch)以填充窗口而不是重复呢?

最佳答案

应用以下 CSS:

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

编辑:为每个评论 ( Martin ) 的正文声明添加 margin: 0;

编辑:添加background-attachment: fixed; 到每个评论的正文声明(Johe Green)。

关于 body 上设置的 CSS3 渐变背景不会拉伸(stretch)而是重复?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2869212/

相关文章:

css - 没有这样的元素异常

html - 具有不同宽度的单行 ul 的 CSS 容器掩码

html - 具有透明度的 CSS 边框变化

javascript - 向第 3 方纯色圆环图添加渐变

ios - 在 iOS 上插值渐变颜色(与 NSGradient 一样)?

swift - 如何使用3种颜色制作UIView渐变效果

css - 使用 CSS 为单个过渡设置不同的缓入和缓出值而不影响其他过渡?

CSS:纯形式的 css 不会在按钮中添加颜色

css - 渐变条纹背景颜色理解

android - 如何为 Android Api Level 19 及更高版本创建渐变?