我們怎樣才能實現一個PSD的對角線漸變到我們的CSS XHTML代碼？

Question

首先，我想告訴大家，我不是一個設計師，也不是一個css/xhtml編碼器。我爲我的一個朋友問這個問題，他正在一個具有對角線漸變的地方工作（它基本上意味着漸變既在X方向也在Y方向），所以他在切分圖像時遇到了問題這樣他就可以在背景中填充切片圖像，這樣可以保持X和Y兩個方向上的梯度。

所以，它就像，如果梯度只在X方向上比我們一般切片垂直1px寬度的圖像。同樣，如果漸變僅在Y方向，那麼我們通常會切片水平1px高度的圖像。 但是，如果梯度在X方向和Y方向都會發生什麼？在這種情況下，我們將如何分割圖像，或者我們如何在CSS/XHTML中實現它？

非常感謝

Pukhraj

Answer 1

簡單。不要拼接它。您可以簡單地將背景圖片作爲整體，在body標記中使用CSS'background指令。只有問題，我可以看到你跑到你的梯度圖像的寬度。如果它（例如）寬度爲1024像素，而客戶端搖擺1920像素，則會看到很多白色。如果不知道誰是你的顯示器人口統計數據和你的佈局，有點難以回答。

Answer 2

你的朋友應該考慮用CSS來做這件事，只要他/她可以只在現代非IE瀏覽器中工作。

例子：http://jsfiddle.net/h9rpE/2/

html, body { 
    font: bold 20px Helvetica, Arial, sans-serif; 
    height: 100%; 
} 
body { 
    background: white -moz-linear-gradient(135deg, black, white) fixed; 
    background: white -webkit-gradient(linear, left top, right bottom, from(white), to(black)) fixed; 
} 

或者你可以使用背景尺寸：

例子：http://jsfiddle.net/rLttj/2/

body { 
    background: white url('http://dropbox.smallparade.com/grad.jpg') no-repeat fixed; 
    -moz-background-size: 100% 100%; -webkit-background-size: 100% 100%; background-size: 100% 100%; 
}