在CSS中使用重複圖像渲染草圖

我想要創建一個草地的大場，只使用一系列小塊或切片，這些小塊或切片將以一種聰明的方式重複。我認爲the cicada principle可以用來實現這一點，但我不知道如何將它應用於草地效果。在CSS中使用重複圖像渲染草圖

舉一個具體的例子，考慮這一形象：

Grass

任何人都可以重新創建使用片或小尺寸（平方例如，片只有幾像素寬，或者只有幾像素高，如果他們是水平的，或正方形5x5或更小）？最終的產品不需要與原件完全匹配，只是看起來相似。該解決方案應該能夠創建一個能夠填充任何所需維度的div的草地。任何重複現場都應該是無縫的，一目瞭然（如上圖鏈接所示）。

感謝您的任何幫助。

2011-11-12 Jonah

您是否試圖自己解決這個問題？我們幫助解決問題，而不是爲你做。 – Blender

最簡單的選擇可能是Photoshop將圖像無縫平鋪。我不確定你爲什麼想用CSS創建它。 – thirtydot

我曾考慮過它，不知道如何開始。是的，在photoshop中創建切片顯然是解決方案的一部分。問題是：切片（或方塊）應該是什麼樣的，它們應該如何重複？ – Jonah

通過創建無縫圖案圖像作爲背景開始。例如參見this教程。

當你有你的無縫模式圖像時，只需將它用作div的背景，並使用background-repeat css-property重複使用它。

.your-div 
{ 
background-image:url('seamless-pattern-image.png'); 
background-repeat:repeat; 
}

2011-11-12 21:40:47

如果您在PhotoShop中打開圖片，只需剪裁3種尺寸的圖片，並將下面的結構作爲蒙版應用。

layer mask

爲了獲得更好的結果，模糊了面膜，所以它不具有硬邊。

2011-11-12 21:49:18 Pepijn

回答