3

在 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 像素高度的线性渐变，然后不断向下重复。类似于此图像：

在此处输入图像描述

有谁知道出了什么问题？

4

2 回答 2

5

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

背景在应用于和/或时具有特殊行为。当您在不触摸的情况下应用背景时，会发生主体背景传播到视口，并且该背景的行为就好像它是在 上声明的：bodyhtmlbodyhtmlhtml

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

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

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

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

html {
    min-height: 100%;
}

如果需要，您也可以将背景样式从bodyto移动html，但只要您一次只在其中一个元素上设置背景，将其应用于哪个元素并没有什么区别。

于 2013-04-24T01:03:39.643 回答
1

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

background-attachment:fixed

我知道这是一篇旧帖子，但我很确定人们仍然在为此苦苦挣扎，我尝试添加线性渐变并且没有工作，直到我发现我的背景附件属性是否有效。

于 2016-03-11T06:41:14.250 回答