используя градиент htmt5 и javascript, имитируйте зерно

Question

шахматная доска в таблице, каждый квадрат - 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>