html - 带有 img div 的 CSS 背景图片

Question

我正在尝试研究如何在网格上使用 img div。这个网格的背景图像包含一个边框，当我尝试检查元素元素时，img div 从绝对左上角开始，而不是稍微远离实际的棋盘图案图像，它周围有一个粗边框(950 * 500 - 18 列宽 9 行)。有谁知道我该如何解决这个问题？

CSS

body
{
    background: #000000 url('gfx/bg.png') 0 0 no-repeat;
    position: absolute;
    width: 1280px; height:720px;
    margin: 0; padding: 0;
    overflow: hidden;
    font-family: tivo-normal;
    text-align: center;
    color: #FFFFFF;
}




#GameGrid
{
    position: absolute;
    /*width: 806px; height: 496px; top: 120px; left: 92px;*/
    width: 950px; 
    height: 500px;
    top: 50px; 
    left: 92px;
    background: transparent url('gfx/Game_0003_GAMEGRID.png') center center no-repeat;
}

#GameGrid > div
{
    /*width: 62px; height: 62px;*/
    width: 52px; height: 52px;
    margin: 0;
    float: left;
}

#GameGrid > div > img
{
    /*width: 62px; height: 62px;*/
    width: 52px; height: 52px;
    margin: 0;
}

Answer 1

如果我根据给定的值进行计算:18 列，每列 52 像素宽，使其为 936 像素，而您的 GameGrid 为 950 像素。所以我假设 14px 被边界占用，即每边 7px

因此，您可以在 GameGrid 中添加一个填充

{
    position: absolute;
    /*width: 806px; height: 496px; top: 120px; left: 92px;*/
    width: 950px; 
    height: 500px;
    top: 50px; 
    left: 92px;
    background: transparent url('gfx/Game_0003_GAMEGRID.png') center center no-repeat;
    padding:7px;
}

如果有特殊需要，设置特定的上、右、下、左内边距。