jquery - 在 css 中更改背景位置不起作用

Question

我有一张尺寸为 5760x496 像素的图片。此图像由三张 1920x496 像素的图像组成。现在我只尝试使用 :hover 更改位置，当我知道它是如何工作时，我将在 jQuery 中更改它。问题是我的代码的结果是白色背景，所以我认为其中有些东西不起作用。这是我的 CSS:

.slider {   
    position:relative;
    height: 496px;
    border-bottom: 1px solid #ddd;
    background: url(../images/full_slider.jpg) no-repeat;
    background-position-x: 0px;
}

.slider:hover{
    background-position-x: 1920px;
}

在这种情况下，我希望仅将背景从第一张幻灯片转换为第二张幻灯片，但这不是结果。

Answer 1

you can set the x property for background-position like this:

background-position: x-px y-px;

例如:background-position: 40px 0;

看看这是否适用于您的示例:http://jsfiddle.net/hboq09p9/

代码:

.slider {   
    position:relative;
    height: 496px;
    border-bottom: 1px solid #ddd;
    background: url('http://images.visitcanberra.com.au/images/canberra_hero_image.jpg') no-repeat;
    background-position: 0px 0px;
}

.slider:hover{
    background-position: 40px 0;
}

(我刚刚将它移动了 40px，因为我的图像不是 1920px 宽)