Question

有没有办法为单个元素设置多个背景位置属性？根据链接的状态（按下/悬停/默认），我需要更改正在显示的图像的X和Y值。

我希望我的CSS文件中的Y值是静态的，而X位置需要根据导航栏中的每个元素进行更改（链接进入）。

有办法做到这一点吗？在线查看，我还没有找到为背景位置设置顶部或左侧参数的方法。

Answer 1

[background-position]接受一个或两个长度值，百分比或   关键字。

如果只为background-position指定了一个值，则为第二个   值被假定为中心。使用两个值的地方，至少   一个不是关键字，第一个值代表水平   位置，第二个代表垂直位置。

您很可能必须依赖JavaScript来保留这些Y值。

Answer 2

您可以使用此CSS根据其状态（常规，悬停或活动）更改元素的背景图像位置...假设您使用精灵作为背景：

#NavElement {
   background-image:url(../img/button.png);
   background-repeat:no-repeat;
   background-position:top center;
}

#NavElement:hover {
   background-position: center; /* center is assumed as the second value */
}

#NavElement:active {
   background-position:bottom center;
}

此外，您可以在px中指定位置，而不是底部，顶部或中心。

CSS定位 - 多个背景位置属性？

2 个答案: