我的图片大小为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;
}
在这种情况下,我希望将背景从第一张幻灯片转换为第二张幻灯片,但这不是结果。
答案 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;