0

对于我的主页，我在一个表格中嵌套了四个图像，这些图像将用作指向其他页面的链接。悬停时，我有一个稍微透明的背景，文字覆盖在图片上（段落元素）。一切都按需要进行，但是在覆盖层和表格单元格的边缘之间存在约 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;
}
4

1 回答 1

1

您只需要在单元格上设置填充

#hometable td {
    padding: 0;
}

jsFiddle

于 2013-07-01T17:31:16.057 回答