css - 是否可以在保持“右上角”的同时更改背景位置？

Question

我有一个背景位置为“右上角”的对象

我想将此背景位置向上移动 10 像素（悬停时），但是一旦我更改值，新值就会从 0,0 点（左上角）插入，但我想要（右上角）

有没有 100% CSS 解决方案？

Answer 1

我认为这就是你想要的：

div{
    height:450px;
    width:450px;
    border:1px solid red;
    background-image:url(//IMAGE);
    background-repeat:no-repeat;
    background-position: 100% 0;
}

div:hover{
    background-position: 100% -10px;
}

给它一个background-position:100% 0设置它到右上角。10px然后从悬停时的高度减去。

示例：http: //jsfiddle.net/jasongennaro/Teyfj/

高度、宽度和边框仅作为示例

Answer 2

如果要在悬停时更改特定元素的背景图像：

#my_element {
    background-image: url(/path/to/image);
]
#my_element:hover {
    background-image: url(/path/to/another/image);
]

因此，您可以制作第二张距离顶部 10px 的图像，这应该可以工作，我猜用body而不是#my_element.