Question

对于我的主页面，我有四个嵌套在表格中的图像，这些图像将作为其他页面的链接。在悬停时，我有一个略微透明的背景，文字覆盖图片（段落元素）。一切都按照需要工作，但是覆盖层和表格单元格的边缘之间有大约1px的间隙。我已经弄乱了边缘并且可以让它到达顶部和左边，但是底部和右边仍然有问题。我对html和css非常新，任何反馈都非常感谢！

这是html：

<div id="wrapper">
    <table id="hometable">
        <thead></thead>
        <tbody>
            <tr>
                <td class="homeimg" id="longboardingnav">
                    <p class="hidden">Longboarding</p>
                </td>
                <td class="homeimg" id="workinprogress1"></td>
            </tr>
            <tr>
                <td class="homeimg" id="workinprogress2"></td>
                <td class="homeimg" id="workinprogress3"></td>
            </tr>
        </tbody>
    </table>
</div>

这是css：

#wrapper {
    margin: auto;
    width: 60%;
}

#hometable {
    margin: auto;
    margin-top: 100px;
    table-layout: fixed;
}

.homeimg {
    border: 2px solid #000;
    height: 175px;
    width: 250px;
}

#longboardingnav {
    background-image: url(images/photo4.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}

.homeimg .hidden {
    position: relative;
    visibility: hidden;
    background: rgba(125,125,125,0.82);
    height: 77px;
    width: 152px;
    margin: 0;
    color: #FFF;
    font-family: Verdana;
    text-align: center;
    padding: 50px;
    display: block;
}

.homeimg:hover .hidden {
    visibility: visible;
    opacity: 1;
}

Answer 1

您只需在细胞上设置填充

#hometable td {
    padding: 0;
}

段落覆盖在表格中，在边缘周围创建不必要的间隙

1 个答案:

jsFiddle