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

【问题标题】：Is it possible to change the background-position while keeping "top right"?是否可以在保持“右上角”的同时更改背景位置？
【发布时间】：2011-09-11 05:37:15
【问题描述】：

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

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

是否有任何 100% CSS 解决方案？

【问题讨论】：

如果你只想要这个静态的，为什么不制作一个顶部剃掉 10px 的图像版本呢？
我只想在悬停时将其移动 10px，我会更新我的问题以使其更清晰
为什么不简单地使用background-postion: 10px right; 或background-postion: -10px right;（取决于您要做什么）？
抱歉，应该是相反的：background-postion: right -10px;。

标签： css background-position

【解决方案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/

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

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

我已经知道了，但是我喜欢只使用 1 个背景然后移动位置，因为下载第 2 个背景时会有延迟，我讨厌它。（我知道有一些解决方法，比如预先缓存它们，但我真的更喜欢使用 1 个背景）