使用htmt5渐变和javascript，模拟木纹

Question

在 TABLE 中有一个棋盘，每个方格一个 TD。

如何使用 html5 渐变（以及随机性的 javascript）为深色方块创建木质纹理背景？

Answer 1

我正在抓取一个大的木质纹理（更改为您喜欢的纹理）并随机抓取一块不透明度为 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>