在 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

看看这个 - http://www.w3schools.com/cssref/pr_background-position.asp

background-image: url('smiley.gif');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;

Answer 2

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 宽）

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

Change background position in css doesn't work

html

css

jquery

background