Question

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

我想将此背景位置向上移动10px（在悬停时），但是一旦我更改了值，新值将从0,0点（左上角）插入但我想要（右上角）< / p>

是否有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。

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

2 个答案: