jquery - 如何让我的 Sprite 响应

Question

我们拥有的是 Sprite 上的一组蓝色窗帘，我想在背景 jpg 宽度减小时使其流畅。 请注意， Sprite 内部的蓝色窗帘覆盖了 jpg 的蓝色窗帘。 Sprite 需要覆盖顶部中心的两个蓝色窗帘，因为 jpg 是响应式的。

参见网站:http://demo.chilipress.com/epic3/

最终结果需要如下所示: 正如你所看到的，这里有三层。 jpg(背景)、窗帘( Sprite )和老鹰( Sprite )。因此，当更改尺寸时， Sprite 必须保持在正确的位置并做出响应。

HTML

<img src="assets/contact.jpg" alt="background image">
<div id="sprite_contact" class="sprite_contact"></div>

CSS

#sprite_contact{
max-width: 684px;
background: url('sprite_contact.png');}

.sprite_contact{
width: 100%;
height: 128px;
top: 0;
position: absolute;
margin: 0 0 0 27%;
background-size: cover;}

Answer 1

我已经设法使我的 sprite 完全响应。为此，我没有使用任何切片 (photoshop) 或 javascript。还要注意 Sprite 是如何绝对定位的，但仍然根据背景做出响应。

为了更好地理解这个过程，请查看以下链接:http://brianjohnsondesign.com/unlisted/demos/responsivesprite/

另请参阅我的链接以查看它在我的网站上的外观:http://demo.chilipress.com/epic3/如果我的链接不再有效，请尝试上面的第一个链接。

在此处查看 CSS 和 HTML

#sprite1_contact{
background-image: url('sprite_contact.png');
width: 35.2%;
height: 0;
padding-bottom: 7%;
background-position: 0 0;
background-size: 100%;
display: block;
top: 0;
position: absolute;
margin: 0 0 0 32.3%;
z-index: 2;}

#sprite2_contact {
background-image: url('sprite_contact.png');
width: 27.5%;
height: 0;
padding-bottom: 28%;
background-position: 0 27%;
background-size: 100%;
display: block;
top: 0;
position: absolute;
margin: 0 0 0 35.8%;
z-index: 1;}

HTML

        <div id="sprite1_contact"></div>
        <div id="sprite2_contact"></div>