使用HTML5 gradient和javascript，模拟木纹

桌上有一个棋盘，每个方块一个TD

---

如何使用html5渐变（javascript表示随机性）为深色方块创建木材纹理背景？

我正在抓取一个大木材纹理（更改为您喜欢的纹理）并抓取一块透明度为50%的随机纹理，然后下面是一个随机的棕色，为每个方块添加一个独特的底色。你可以调整所有这些以获得你想要的效果。我弄乱了一些渐变，它们看起来很傻

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<style>
div {
    width: 100px; height: 100px; margin: 1px;
}
div.texture {
    background: url(http://gallery.hd.org/_exhibits/textures/wood-grain-closeup-1-DHD.jpg);
    opacity:0.4; filter:alpha(opacity=100);
}
</style>
<script>
$(function(){
    $('div.bg').each(function(){

        // make each square a random brown
        var browns = new Array('CD853F','8B4513','A0522D');
        var col = Math.floor(Math.random()*3);
        $(this).css('background-color',browns[col]);

        // the dimensions of your texture minus square size
        var image_width = 500;
        var image_height = 400;

        // get a random positions
        var x = Math.floor(Math.random()*image_width);
        var y = Math.floor(Math.random()*image_height);

        // make them negative
        x = x - (x * 2);
        y = y - (y * 2);

        var d = $(this).children('div.texture');
        d.css('background-position', x+'px'+' '+y+'px');
    });
});
</script>
<div class='bg'><div class='texture'></div>
<div class='bg'><div class='texture'></div>

div{
宽度：100px；高度：100px；边距：1px；
}
分区纹理{
背景：url(http://gallery.hd.org/_exhibits/textures/wood-grain-closeup-1-DHD.jpg);
不透明度：0.4；过滤器：alpha（不透明度=100）；
}
$（函数（）{
$（'div.bg'）。每个（函数（）{
//使每个正方形都成为随机的棕色
var browns=新阵列（'CD853F'、'8B4513'、'A0522D'）；
var col=Math.floor（Math.random（）*3）；
$（this.css（'background-color'，browns[col]）；
//纹理的尺寸减去正方形大小
var图像_宽度=500；
var图像_高度=400；
//获得一个随机位置
var x=Math.floor（Math.random（）*图像宽度）；
var y=Math.floor（Math.random（）*图像高度）；
//让它们成为负数
x=x-（x*2）；
y=y-（y*2）；
var d=$（this.children（'div.texture'）；
d、 css（'background-position'，x++'px'++'''+y++'px'）；
});
});

我正在抓取一个大的木材纹理（换成你喜欢的纹理），然后抓取一块透明度为50%的随机纹理，然后下面是一个随机的棕色，为每个正方形添加一个独特的底色。你可以调整所有这些以获得你想要的效果。我弄乱了一些渐变，它们看起来很傻

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<style>
div {
    width: 100px; height: 100px; margin: 1px;
}
div.texture {
    background: url(http://gallery.hd.org/_exhibits/textures/wood-grain-closeup-1-DHD.jpg);
    opacity:0.4; filter:alpha(opacity=100);
}
</style>
<script>
$(function(){
    $('div.bg').each(function(){

        // make each square a random brown
        var browns = new Array('CD853F','8B4513','A0522D');
        var col = Math.floor(Math.random()*3);
        $(this).css('background-color',browns[col]);

        // the dimensions of your texture minus square size
        var image_width = 500;
        var image_height = 400;

        // get a random positions
        var x = Math.floor(Math.random()*image_width);
        var y = Math.floor(Math.random()*image_height);

        // make them negative
        x = x - (x * 2);
        y = y - (y * 2);

        var d = $(this).children('div.texture');
        d.css('background-position', x+'px'+' '+y+'px');
    });
});
</script>
<div class='bg'><div class='texture'></div>
<div class='bg'><div class='texture'></div>

div{
宽度：100px；高度：100px；边距：1px；
}
分区纹理{
背景：url(http://gallery.hd.org/_exhibits/textures/wood-grain-closeup-1-DHD.jpg);
不透明度：0.4；过滤器：alpha（不透明度=100）；
}
$（函数（）{
$（'div.bg'）。每个（函数（）{
//使每个正方形都成为随机的棕色
var browns=新阵列（'CD853F'、'8B4513'、'A0522D'）；
var col=Math.floor（Math.random（）*3）；
$（this.css（'background-color'，browns[col]）；
//纹理的尺寸减去正方形大小
var图像_宽度=500；
var图像_高度=400；
//获得一个随机位置
var x=Math.floor（Math.random（）*图像宽度）；
var y=Math.floor（Math.random（）*图像高度）；
//让它们成为负数
x=x-（x*2）；
y=y-（y*2）；
var d=$（this.children（'div.texture'）；
d、 css（'background-position'，x++'px'++'''+y++'px'）；
});
});

如果您想要一个没有基本纹理的纯JS解决方案，那么我对tip没有任何想法，但希望保持页面独立于服务器（速度、脱机工作）。我的猜测/希望是半径梯度可以像分形一样使用。当然，你会把图像放到自己的服务器上，而不是热链接它。。但是这里有JS分形意味着独立于任何服务器。同时，在梯度-模糊上获得与您相同的结果。错误的颜色，但迄今为止最好的例子：-webkit重复径向渐变（左上角，圆圈，红色，蓝色10%，红色20%）如果你想要一个没有基本纹理的纯JS解决方案，那么我没有提示的想法，但希望保持页面独立于服务器（速度，脱机工作）。我的猜测/希望是半径梯度可以像分形一样使用。当然，你会把图像放到自己的服务器上，而不是热链接它。。但是这里有JS分形意味着独立于任何服务器。同时，在梯度-模糊上获得与您相同的结果。错误的颜色，但迄今为止最好的例子：-webkit重复径向渐变（左上角，圆圈，红色，蓝色10%，红色20%）