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

Question

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

，我想将此背景位置向上移动 10px（悬停时），但是一旦我更改值，新值就会从 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/

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

Answer 2

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

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

所以你可以制作第二个图像，距离顶部 10px，这应该可以工作，我想使用 body 而不是 #my_element。