0

私のメイン ページには、他のページへのリンクとして機能する 4 つの画像がテーブルにネストされています。ホバーすると、背景がわずかに透明になり、テキストが画像 (段落要素) に重なって表示されます。すべてが希望どおりに機能しますが、オーバーレイとテーブル セルの端の間に ~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;
}

jsフィドル

于 2013-07-01T17:31:16.057 に答える