Question

可能是记录最多的科目之一，但我似乎无法找到正确的答案。

我有一个包含两个图像的精灵。我只想展示绿色的，同时让它响应。它是整个页面的背景图像。

请参阅：http://demo.chilipress.com/epic3/

我给它一个高度：900px，因为那是整个img高度的一半。我知道它现在没有响应。

HTML：

  <div id="background_contact"></div>

CSS：

#background_contact{
background-image: url('bg_contact.jpg');
width:100%; 
height: 900px;
background-position: 0 0;
background-size: 100%;
display: block;
}

Answer 1

一个例子是对它有悬停效果，但你明白了。

#background_contact:hover {
    background-position: 0% 100%;
}

如果您不介意拉伸，可以调整CSS以涵盖所有内容。

#background_contact {
    background-size: 100% 200%;
}

如果你不想让它伸展，你可以使用下面的CSS，虽然你可能需要自己的背景颜色填充物来填补空白：

#background_contact {
    background-size: auto 200%;
    background-position: 50% 0;
}
#background_contact:hover {
    background-position: 50% 100%;
}

如何使背景精灵响应，只显示一半的高度？

1 个答案: