如何使我的精灵响应

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

我建议你分别切片每一层。

从我所看到的情况来看，我们可以用以下内容对其进行切片：

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

湾floor - 将其设为div的背景，将其定位为绝对，锚定到bottom和repeat-x，以及center center position（z-index：1）和width 100％

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

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

即窗帘顶部 - 将其作为div的背景，将其定位为绝对，固定在顶部和右侧，宽度为100％（z-index：3）

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

Answer 3

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

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

Answer 4

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