CSS背景漸變重複問題

我有一個html頁面，需要擴大寬度和高度，所以需要能夠上下左右滾動，但我似乎無法獲得css漸變重複 - x並向下留下純色。CSS背景漸變重複問題

精簡代碼：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
    "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-type" content="text/html; charset=utf-8"> 
<style type="text/css" media="screen"> 
    html { 
     height: 100%; 
     background-color: #366fcd; } 
    body { 
     margin: 0; 
     height: 100%; 
     width: 100%; 
     background-color: #366fcd; 
     background: -moz-linear-gradient(center top, #316494 0%,#366fcd 100%); 
     background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #316494),color-stop(1, #366fcd)); 
     background-repeat: repeat-x; 
    } 
    div#TheElement { 
     position: absolute; 
     width: 100px; 
     height: 100px; 
     background-color: #fff; 
     left: 2000px; 
     top: 2000px; 
    }  
</style>  
</head> 
<body> 
    <div id="TheElement">   
    </div> 
</body> 
</html>

這將運行漸變成純色（＃366fcd）當您向下滾動，但是當你向右滾動，漸變停止，您將看到純色也有。 See example。

如果我刪除background-color：＃366fcd; } from html元素，然後如預期的那樣沿x軸重複漸變，但向下滾動時，漸變停止並出現白色。 See example。

我知道我總是可以使用背景圖片，但寧願讓CSS工作。

哦，是的，這是在OSX Lion的Chrome和FF測試。

安東尼

來源

2011-09-15 littlecharva

所有你需要的是background-attachment財產。有了這個屬性，你可以在身體完全填充屏幕高度的時候修復身體的背景。

background-attachment:fixed; 
height:100%;

看這裏 http://jsfiddle.net/mohsen/TanzY/

這裏我舉的例子就是你們的榜樣固定：http://jsbin.com/ileqid/4

我刪除background-repeat財產，也改變了顏色更加直觀。

如果你想要你的背景卷軸，那麼你需要設置the background-attachment到scroll。只有滾動條纔會發生，如果您的內容較大，則在this例如，我將主體標記height設置爲3000px。

來源

2011-09-15 07:51:41 Mohsen

你的固定JSBin例子似乎並沒有在Mac上的Chrome 13的工作。當我滾動到右側時，漸變背景仍然消失。 –

我修正了這個問題，這是因爲OP爲CSS標籤設置了CSS。 – Mohsen

啊哈！我認爲這可能是這樣的。好工作。 –

將您的漸變應用於html標記。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
    <head> 
    <meta http-equiv="Content-type" content="text/html; charset=utf-8"> 
    <style type="text/css" media="screen"> 
     html, body {    
      width:100%; 
      height:100%; 
      margin:0; 
      padding:0;}   
     html { 
      background:red -moz-linear-gradient(center top, #316494 0%,red 100%) repeat-x; 
      background:red -webkit-gradient(linear, left top, left bottom, color-stop(0, #316494),color-stop(1, red)) repeat-x; 
     } 
     div#TheElement { 
      position: absolute; 
      width: 100px; 
      height: 100px; 
      background-color: #fff; 
      left: 2000px; 
      top: 2000px; 
      border:1px solid #000; 
     }  
    </style>  
    </head> 
    <body> 
     <div id="TheElement">   
     </div> 
    </body> 
</html>

經測試，在FF6，鉻13和Safari 5

來源

2011-09-15 08:26:47 easwee

CSS背景漸變重複問題

回答

相關問題