用asp.net mvc的网格包装图像

Question

我正在使用microsoft visual studio 2012创建一个asp.net mvc应用程序。

我想创建一个仅包含图像内容的网格，不包括背景。我正在使用.png图像文件，以便背景透明。我将使用网格绑定到数据。网格上的每个单元格都会在鼠标悬停时显示唯一的数据/文本。

html＆amp;我在下面的CSS代码在图像上创建一个完整的正方形网格，但它与我的图像不完全吻合。创建的网格不够灵活，只能包装到我的图像内容。我还为每个单元格添加了一种颜色，让我预览每个单元格的位置。

是否可以创建一个仅包含图像内容的灵活网格？

HTML

<div class="element">
<img src="/Content/themes/images/z1.png">
<div class="grid_container">  
    <ul class ="grid">

        @{
        var i = 0;
        while (i < 60)
            {
                i += 1;
                <li class ="grid_child">
                    <ul class="cell">
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                    </ul>
                </li>
            }
         }

    </ul>
</div>

CSS

ul.grid li {
    float:left;
    width:106px;
    height:90px;
    opacity:.5;
}
    ul.grid li.red {
        border:1px solid #ff0000;
        background-color:#FF0000;
    }
    ul.grid li.blue {
        border:1px solid #0094ff;
        background-color:#0094ff;
    }
    ul.grid li.yellow {
        border:1px solid #ffd800;
        background-color:#ffd800;
    }
    ul.grid li.orange {
        border:1px solid #ff6a00;
        background-color:#ff6a00;
    }
    ul.grid li.green {
        border:1px solid #00ff21;
        background-color:#00ff21;
    }
    ul.grid li.gray {
        border:1px solid #CCC;
        background-color:#ccc;
    }
    ul.grid li.violet {
        border:1px solid #ff00dc;
        background-color:#ff00dc;
    }
    ul.grid li.pink {
        border:1px solid #ff006e;
        background-color:#ff006e;
    }

ul.cell li {
    /*float:left;*/
    width:10px;
    height:10px;
}