如何實現「紙樣」的背景效果？

我是一名後端開發人員，我的設計技能無疑非常薄弱。有一個我非常喜歡的CSS背景效果，我想知道是否有人可以給我一個關於如何實現它的一般想法？如果您查看諸如sourcebits.com或youtube.com的網站，背景看起來有點灰，並且具有幾乎像一張高質量靜止的紋理。他們如何實現這一效果？如何實現「紙樣」的背景效果？

謝謝。

來源

2012-09-11 William

這只是一個平鋪的背景圖像。看看BODY標籤的CSS，你會看到發生了什麼。 –

CSS通過SourceBits使用：

body { 
background: #8D9698 url('../images/body-by-bg.jpg') repeat fixed 0 0; 
}

SourceBits背景鏈接：由YouTube使用 http://www.sourcebits.com/images/body-by-bg.jpg

CSS：

body { 
background: no-repeat url(//s.ytimg.com/yt/imgbin/www-refreshbg-vflC3wnbM.png) 0 0; 
background-color: #EBEBEB; 
background-repeat: repeat; 
}

YouTube的背景鏈接： http://s.ytimg.com/yt/imgbin/www-refreshbg-vflC3wnbM.png

來源

2012-09-11 20:40:44 Anne

謝謝安妮！我非常感謝你的幫助。 – William

死鏈接....... – markus

-2

他們使用圖片，你需要一個角落和一側

來源

2012-09-11 20:40:54

不，他們只是使用重複的背景圖片。 – mash

這取決於你在哪一邊 –

他們可能會使用一個小圖形，平鋪。通常，這個小圖形是10x10像素或更小，並且包含背景顏色（在YouTube中是灰色的）和一些比背景顏色稍暗的點。平鋪時，會產生陰影效果。

Whups，@安妮在我完成之前得到了答案！她還包含了您需要的確切代碼。但是，是的，現在你知道代碼，並且你已經得到了答案中的'whys':)

來源

2012-09-11 20:41:42

不是你的問題的答案，但是當你做前端時，這可能會幫助你很多編碼：你有沒有試過使用Chrome的調試器工具？還是Firebug？這會讓你看到HTML以及應用於它的任何CSS樣式定義。它比查看源代碼要快得多，如果前端不是您的本地土地，那麼它會特別有用，因爲它會向您顯示適用於該特定元素的CSS規則 - 背景，字體，您有什麼。

來源

2012-09-11 20:50:27

謝謝，雷。我會檢查他們。 – William

如何實現「紙樣」的背景效果？

回答

相關問題