带有 img div 的 CSS 背景图像

Question

我正在尝试研究如何在网格上使用imgdivs。此网格的背景图像包含一个边框，当我尝试检查元素元素时，imgdivs 从绝对左上角开始，而不是稍微远离实际的棋盘图案图像，它周围有一个粗边框（950 * 500 - 18 列宽 x 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 列，每列 52px 宽，使其为 936px，您的 GameGrid 为 950px。所以我假设 14px 被边框占用，即每边 7px

因此，您只需在游戏网格中添加填充即可

{
    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;
}

设置特定的顶部，右侧，底部，左侧填充（如果特别需要）。

Answer 2

您可以将

cellpading="0" 属性添加到标签中。您还可以添加 CSS 规则以防止填充，例如：

#GameGrid td, #GameGrid th{
  padding:0px;
  position:relative;
}

也许添加 top：0px; 到你的 #GameGrid>div> img。一个例子可以帮助我们更好地了解您的问题：-）

Answer 3

修改图像文件并删除网格周围的边框。创建了另一个仅包含网格边框图像的div，并将其与网格div 对齐。