如何在 IE10 中使用 css 线性渐变？答案

【问题标题】：How to use css linear gradients in IE10?如何在 IE10 中使用 css 线性渐变？
【发布时间】：2013-04-17 08:44:58
【问题描述】：

在 IE10 中，我试图创建一个 CSS 线性渐变，从页面顶部到页面底部。这就是我目前所拥有的

<!DOCTYPE HTML> 
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Test</title>
    </head>
    <body>

        <meta http-equiv="X-UA-Compatible" content="IE=10">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <script type='text/javascript' src='./includes/js/jquery-2.0.0.min.js'></script>
        <link rel='stylesheet' type='text/css' href='./includes/css/css.css'/>




        <p id="title">
            Test
        </p>


    </body>
</html>

css

body {
    margin: 0px; 
    padding: 0px;
    background-image: linear-gradient(to bottom, #dcdcdc 0%, #b0b0b0 100%);
}



#title {
    color:red;
}

但它看起来不像我想要的那样。这最终会产生大约 100 像素高度的线性渐变，然后不断向下重复。类似于这张图片：

有谁知道怎么回事？

【问题讨论】：

你的页面正文有内容吗？也许您想提供一个实际的渲染屏幕截图，显示您使用该 CSS（以及所使用的标记）所看到的内容。
是的，但是css在body标签中，这意味着它应该覆盖整个页面，对吗？目前它覆盖了整个页面，但它的重复高度约为 100 像素。
嗯，渐变在应用于 body 时会表现得很奇怪，这种行为通常取决于 body 尺寸，这通常意味着内容。我需要现场观看，以便确定导致重复的确切原因。
好的，我更新了上面的代码。

标签： css internet-explorer-10 linear-gradients

【解决方案1】：

这不仅仅是 IE10 的问题；事实上，这是设计使然。

当应用于body 和/或html 时，背景具有special behavior。当您将背景应用于body 而不接触html 时，会发生主体背景传播到视口，并且该背景就像在html 上声明一样：

对于根元素是 HTML HTML 元素或 XHTML html 元素的文档：如果根元素上 'background-image' 的计算值为 'none' 并且其 'background-color' 是 ' transparent'，用户代理必须改为从该元素的第一个 HTML BODY 或 XHTML body 子元素传播背景属性的计算值。 BODY 元素的背景属性的使用值是它们的初始值，传播的值被视为在根元素上指定。

即使看起来不是这样，html 和 body 元素实际上并不是以固有的 100% 高度开始的（在 IE 中的怪癖模式除外）；而是像任何其他块框一样采用其内容的高度。这意味着html 与p 元素及其默认边距（与body 元素一起折叠）的组合高度相同。

虽然渐变背景默认设计为在整个高度和宽度上延伸，但html 的实际高度并没有足够的空间让渐变本身覆盖整个视口，因此它只能延伸到某个开始重复之前的高度。 AFAIK，这种行为在所有根据最新标准实现渐变的浏览器中都是一致的。

如果您想让渐变在整个视口中延伸，即使整个页面没有足够的内容，只需添加以下规则：

html {
    min-height: 100%;
}

如果您愿意，您也可以将背景样式从 body 移动到 html，但只要您一次只在其中一个元素上设置背景，这并没有什么区别你应用它。

【讨论】：

谢谢，效果很好，但是使用 height:100% 和背景附件，无论您滚动到哪里，都可以保持渐变相同。有没有办法真正将渐变从顶部拉伸到底部（包括滚动）？
@omega：那将是min-height: 100%。我已经编辑了我的答案。

【解决方案2】：

这个固定贴在下面帮助了我。只需添加

background-attachment:fixed

我知道这是一篇旧帖子，但我很确定人们仍然在为此苦苦挣扎

【讨论】：