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

时间:2015-02-23 12:10:47

标签: jquery html css background

我的图片大小为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;
}

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

2 个答案:

答案 0 :(得分: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宽)

答案 1 :(得分:0)

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

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