1

我正在努力获得包含正确大小的三个图像的行。这三个图像大小相同（270 像素 x 270 像素）并共享一个大小为 310 像素 x 310 像素的公共背景图像（阴影），当鼠标悬停在三个图像中的任何一个上时就会呈现。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 提供适当的填充

将您的 CSS 更新#images为此：

#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 回答