Question

我的图片大小为5760x496像素。该图像由1920x496px的三个图像组成。现在我只想用: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

你可以像这样设置背景位置的x属性：
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宽）

Answer 2

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

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

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

2 个答案: