Question

这是使用绝对定位的表格覆盖在图像上的3x3网格。在100％以外的缩放级别，网格不完全适合图像，可能是由于在将原始像素值转换为缩放像素值时出现舍入误差。如何解决这个问题？

<div class="imageWrapper">
    <img width="201" height="144" src="http://upload.wikimedia.org/wikipedia/commons/thumb/7/7d/Color_icon_green.svg/200px-Color_icon_green.svg.png" />
    <div class="overlay">
        <table>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td>4</td>
                <td>5</td>
                <td>6</td>
            </tr>
            <tr>
                <td>7</td>
                <td>8</td>
                <td>9</td>
            </tr>
        </table>
    </div>
</div>

* {
    margin: 0;
    padding: 0;
}
.imageWrapper {
    position: relative;
}
.overlay {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
}
.overlay table {
    border-spacing: 0;
}
.overlay table td {
    border: 1px solid black;
    text-align: center;
    height: 46px;
    width: 65px;
}

Answer 1

这应该有效：http://jsfiddle.net/NicoO/LYX6T/2/

如果我错过了一些要求，请告诉我。我已将表格宽度设置为图像的宽度，但仅保留<td>的宽度和高度。你提供的网格图像是一个演示吗？一些问题伴随着反别名而不是图像的大小相等的列。

* {
    margin: 0;
    padding: 0;
}
.imageWrapper {
    position: relative;
}
.overlay {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
}
.overlay table {
    border-spacing: 0;
    table-layout: fixed;
    border-collapse: collapse;
    width: 201px;
    height: 144px;
}
.overlay table td {
    border: 1px solid black;
    text-align: center;

}

为图像创建缩放不变的网格覆盖

1 个答案: