如何让我的精灵响应

Question

我们拥有的是一组精灵上的蓝色窗帘，我想让它随着背景 jpg 的宽度减小而变得流畅。 请注意，精灵内部的蓝色窗帘覆盖了 jpg 的蓝色窗帘。 由于 jpg 具有响应性，精灵需要覆盖顶部中心的两个蓝色窗帘。

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

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

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

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

为了更好地了解这个过程，请查看以下链接：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>

Answer 2

将以下属性添加到您的 CSS：

#sprite_contact {
 max-width: 100%;
 background-repeat: no-repeat;
 background-position: 50% 0%;
 margin-left: 0px;
 }

Answer 3

试试这个。 http://zurb.com/playground/foundation-interchange 真正有用的东西。可能会有所帮助。

Answer 4

我建议您将每一层分别切片。

据我所知，我们可以用以下方式对其进行切片：

一个。墙 - 让它作为你的身体背景重复（x 和 y）

b. floor - 将其作为 div 的背景，将其定位为绝对位置，锚定到底部并重复-x，居中位置 (z-index:1) 和宽度 100%

c。正确的窗帘 - 将其作为 div 的背景，将其定位为绝对位置，固定在顶部和右侧（z-index:2）

d。左侧窗帘 - 将此作为 div 的背景，将其定位为绝对位置，固定在顶部和左侧（z-index：2）

e。窗帘顶部 - 将此作为 div 的背景，将其定位为绝对位置，固定在顶部和右侧，宽度为 100% (z-index:3)

* * 这只是为了说明。因为我没有 PSD，所以没有正确切片。 *