1

3 つの画像を含む行のサイズを正しく設定するのに苦労しています。3 つの画像は同じサイズ (270px x 270px) で、310px x 310px のサイズの共通の背景画像 (影) を共有し、マウスが 3 つの画像のいずれかに置かれたときにレンダリングされます。ここに jsFiddle: jsFiddle

style="height:310px;" を挿入してみました tdタグ、タグtr、および.centerCSS に挿入されますが、どちらも行のサイズが正しくありません。背景の影の画像の上部と下部が切り取られます。

誰か私へのポインタを持っていますか? ありがとうございました。

CSS:

.center {
text-align: center;
}

#images:hover {
background-image: url(http://ubuntuone.com/1SRrDB8i8cBtpm3Smxaz5r);
background-repeat: no-repeat;
background-position:center;     
}

HTML:

<table style="width: 100%">
    <tr>
            <td class="center">
                <div id="images">
                <object class="images" type="image/svg+xml"
                    data="http://ubuntuone.com/5b5ZUS86nHAffWiOirDwFr">
                    <img src="http://ubuntuone.com/12qOaTGCZYzQtqFJpaGbPV" alt="" />
                </object>
                </div>
            </td>
            <td class="center">
                <div id="images">
                <object type="image/svg+xml"
                    data="http://ubuntuone.com/7Ur09JXlGVvF2GhXFbLXlx">
                    <img src="http://ubuntuone.com/54AaqhQUU8npACF2vXzKFp" alt="" />
                </object>
                </div>
            </td>
            <td class="center">
                <div id="images">
                <object type="image/svg+xml"
                    data="http://ubuntuone.com/6tkHm9c2r1eH9PMB9Nr3Ux">
                    <img src="http://ubuntuone.com/4CXw05d1dsSf9VhAIPNZf6" alt="" />
                </object>
                </div>
            </td>
    </tr>
</table>
4

4 に答える 4

3

デモ

画像の周囲に、影を正しく表示するのに十分なスペースがありません。画像にパディングを追加するだけで、スペースを追加できますdiv

#images{
    padding:20px;
}
于 2013-03-18T11:30:53.030 に答える
2

画像を含むdivに適切なパディングを与えるだけです

#imagescssを次のように更新します。

#images
{
    padding:20px;
}
#images:hover {
    background-image: url(http://ubuntuone.com/1SRrDB8i8cBtpm3Smxaz5r);
    background-repeat: no-repeat;
    background-position:center;     
    padding:20px;
}

このフィドルを参照してください

于 2013-03-18T11:24:21.990 に答える
0

スタイリングしてみましたか

    table td.center {
        attributes
    }

CSSで

于 2013-03-18T11:23:40.287 に答える
0

これを試して -

#images{ padding:15px; }

完璧に動作します！

于 2013-03-18T11:28:17.153 に答える