如何在IE10中使用css線性漸變？

在IE10中，我試圖創建一個css線性漸變，從頁面頂部到頁面底部。這是我迄今爲止如何在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; 
}

但它不看我希望它看起來的方式。這最終會出現線性漸變，大約是100px的高度，然後不斷重複向下。與此相似圖片：

enter image description here

有誰知道什麼是錯？

來源

2013-04-24 omega

您的頁面正文是否有任何內容？也許你會想提供一個實際的渲染截圖，看看你看到的CSS（以及使用的標記）。 – BoltClock 2013-04-24 00:34:52

是的，但是CSS在body標籤中，這意味着它應該覆蓋整個頁面，對吧？目前它正在覆蓋整個頁面，但它重複大約100px的高度。 – omega 2013-04-24 00:35:54

那麼，當應用於身體時，漸變的行爲可能會很奇怪，這種行爲通常取決於身體的尺寸，這通常意味着內容。我需要看到它，所以我可以確定究竟是什麼導致重複。 – BoltClock 2013-04-24 00:37:05

這不是IE10的問題;事實上，這是通過設計。

當應用於body和/或html時，背景具有special behavior。當您將背景body不接觸html，會發生什麼情況是，身體的背景被傳播到視口，這樣的背景下充當如果它被宣佈html：

對於文檔根元素是一個HTML HTML元素或XHTML html元素：如果根元素上'background-image'的計算值爲'none'且其'background-color'爲'transparent'，則用戶代理必須傳播計算的背景屬性值從該元素的第一個HTML BODY或XHTML body子元素。 BODY元素的背景屬性的使用值是它們的初始值，並將傳播的值視爲在根元素上指定的值。

即使它否則出現時，htmlbody和元件不與實際的特性100％的高度（除IE中怪異模式）啓動;而是像其他任何方塊一樣，將內容的高度放在其上。這意味着html與您的p元素的組合高度以及其默認邊距（與body元素合併）的高度相同。

默認情況下，漸變背景設計爲在整個高度和寬度上伸展，但html的實際高度不足以讓漸變覆蓋整個視口，因此它只伸展到一定高度在開始重複之前。 AFAIK，這種行爲在所有按照最新標準實現梯度的瀏覽器中是一致的。

如果你想跨越即使沒有足夠的內容整個頁面全視坡度舒展，只需添加這條規則：

html { 
    min-height: 100%; 
}

如果你願意，你可以移動背景樣式從body到html也是如此，但只要您一次只對這些元素中的一個元素設置背景，那麼將其應用到哪個元素上並沒有什麼不同。

來源

2013-04-24 01:03:39 BoltClock

謝謝，這很好地工作，但使用高度：100％和背景附件，這將保持梯度相同，無論您在哪裏滾動。有沒有辦法從頂部到底部（包括滾動）實際拉伸梯度？ – omega 2013-04-24 01:09:14

@omega：那就是'min-height：100％'。我編輯了我的答案。 – BoltClock 2013-04-24 01:12:58

是的，工作。 – omega 2013-04-24 01:14:49

下面這個固定的貼子幫了我。只需添加

background-attachment:fixed

我知道這是一個老的文章，但我敢肯定人們還在爲此我嘗試添加一個線性漸變，並沒有工作，如果我的背景附件屬性它的工作，直到我找到了奮鬥。

來源

2016-03-11 06:41:14

如何在IE10中使用css線性漸變？

回答

相關問題