2011-05-03 107 views
1

,我發現這個CSS創建背景漸變CSS HTML背景漸變

html { 
    background: #999; /* for non-css3 browsers */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000'); /* for IE */ 
    background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000)); /* for webkit browsers */ 
    background: -moz-linear-gradient(top, #ccc, #000); /* for firefox 3.6+ */ 
} 

但它只是創建了一個小酒吧,我想它從頂部到整個頁面的底部去有人能告訴我如何修改使得它的工作我希望它甚至是否有可能

喔耶的方式,它重複了soeme原因

+0

作爲一個側面說明,新的WebKit瀏覽器不再使用'-webkit-梯度()'語法,而是更多的標準樣'-webkit-線性-gradient()'。你可以保留舊語法的向後兼容性,只記得在 – Shauna 2011-05-03 16:28:17

回答

5

你的頁面是太短了。要麼增加min-height: 100%;,要麼增加頁面的空間。

+0

中添加新的語法,似乎在做的伎倆感謝 – mcgrailm 2011-05-03 15:04:43

2

只需添加HTML高度:

html { 
    height: 100%; 
    background: #999; /* for non-css3 browsers */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000'); /* for IE */ 
    background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000)); /* for webkit browsers */ 
    background: -moz-linear-gradient(top, #ccc, #000); /* for firefox 3.6+ */ 
} 
+1

感謝您的演示,我發現它最有用,因爲我以前沒有使用「html」作爲選擇器: ) – 2012-12-17 13:41:56