CSS sprite空格下的
问题描述：
我遇到了我的sprite css问题，我提供了一个jsfiddle，所以你可以看到我的意思。所以你可以观察到图像下面有空格，我似乎无法找到问题所在。这是因为定位？我尝试使用浮动，但它只减少空间。CSS sprite空格下的
我想要完成的是删除下面的空格，因为它真的看起来很丑，在我的网站上有空的空间。
PS。另外，如果我使用绝对，它将重叠我的网站中的文字。
HTML
<div class="container">
<div class="row" style="text-align:center;">
<div class="arrow-sprite"></div>
<div class="arrow-sprite-2"></div>
<div class="arrow-sprite-3"></div>
<div class="arrow-sprite-4"></div>
<div class="arrow-sprite-5"></div>
</div>
</div>
CSS
.arrow-sprite {
background: no-repeat url(http://i.imgur.com/O8R881E.png) 19px 7px;
width: 450px;
height: 441px;
position: relative;
top: 11px;
left: 139px;
z-index: 1;
}
.arrow-sprite-2 {
background: no-repeat url(http://i.imgur.com/O8R881E.png) -1381px -12px;
width: 475px;
height: 419px;
position: relative;
top: -375px;
left: 507px;
z-index: 4;
}
.arrow-sprite-3 {
background: no-repeat url(http://i.imgur.com/O8R881E.png) -430px -8px;
width: 387px;
height: 416px;
position: relative;
top: -523px;
left: 134px;
z-index: 3;
}
.arrow-sprite-4 {
background: no-repeat url(http://i.imgur.com/O8R881E.png) -900px 12px;
width: 442px;
height: 427px;
position: relative;
top: -908px;
left: 418px;
z-index: 3;
}
.arrow-sprite-5 {
background: no-repeat url(http://i.imgur.com/O8R881E.png) 30px -438px;
width: 519px;
height: 490px;
position: relative;
top: -1529px;
left: 239px;
z-index: 0;
}
.arrow-sprite:hover, .arrow-sprite-2:hover,.arrow-sprite-3:hover,.arrow-sprite-4:hover {
filter: contrast(160%);
transition: 0.5s ease-in;
}
答
试着改变你的row的位置relative，然后设置精灵来position:absolute;，调整为精灵的top位置会做的伎俩。
同样对于
row设置特定height，这样它会不低于重叠 任何其他内容。
运行下面的代码片段：
.arrow-sprite {
background: no-repeat url(http://i.imgur.com/O8R881E.png) 19px 7px;
width: 450px;
height: 441px;
position: absolute;
top: 11px;
left: 139px;
z-index: 1;
}
.arrow-sprite-2 {
background: no-repeat url(http://i.imgur.com/O8R881E.png) -1381px -12px;
width: 475px;
height: 419px;
position: absolute;
top: 65px;
left: 507px;
z-index: 4;
}
.arrow-sprite-3 {
background: no-repeat url(http://i.imgur.com/O8R881E.png) -430px -8px;
width: 387px;
height: 416px;
position: absolute;
top: 333px;
left: 134px;
z-index: 3;
}
.arrow-sprite-4 {
background: no-repeat url(http://i.imgur.com/O8R881E.png) -900px 12px;
width: 442px;
height: 427px;
position: absolute;
top: 358px;
left: 418px;
z-index: 3;
}
.arrow-sprite-5 {
background: no-repeat url(http://i.imgur.com/O8R881E.png) 30px -438px;
width: 519px;
height: 490px;
position: absolute;
top: 169px;
left: 239px;
z-index: 0;
}
.arrow-sprite:hover, .arrow-sprite-2:hover,.arrow-sprite-3:hover,.arrow-sprite-4:hover {
filter: contrast(160%);
transition: 0.5s ease-in;
}<div class="container">
<div class="row" style="text-align:center;position: relative;height: 850px;">
<div class="arrow-sprite"></div>
<div class="arrow-sprite-2"></div>
<div class="arrow-sprite-3"></div>
<div class="arrow-sprite-4"></div>
<div class="arrow-sprite-5"></div>
</div>
<div class="row">Prow scuttle parrel provost Sail ho shrouds spirits boom mizzenmast yardarm. Pinnace holystone mizzenmast quarter crow's nest nipperkin grog yardarm hempen halter furl. Swab barque interloper chantey doubloon starboard grog black jack gangway rutters.
Deadlights jack lad schooner scallywag dance the hempen jig carouser broadside cable strike colors. Bring a spring upon her cable holystone blow the man down spanker Shiver me timbers to go on account lookout wherry doubloon chase. Belay yo-ho-ho keelhaul squiffy black spot yardarm spyglass sheet transom heave to.
Trysail Sail ho Corsair red ensign hulk smartly boom jib rum gangway. Case shot Shiver me timbers gangplank crack Jennys tea cup ballast Blimey lee snow crow's nest rutters. Fluke jib scourge of the seven seas boatswain schooner gaff booty Jack Tar transom spirits.</div>
</div>
是什么造成的空间是精灵堆叠在彼此的顶部，这是div'的'默认行为，因为他们占据100％的宽度，将下一个兄弟元素推向下方。修改'top'属性不会影响这个。 如果你摆脱了sprites CSS的'top'和'left'属性，在开发者控制台中可以更容易地看到它。 你究竟如何定位这些精灵？ 作为一个方面说明，你的精灵不会加载在jsfiddle中，因为外部链接被禁止从你的网站。 – FuriousD
您用于精灵的图像是要求用户名密码。请提供另一个图像 –
@FuriousD其实我使用的是顶部和左侧属性，所以我可以将.arrow-sprite，.arrow-sprite-2，.arrow-sprite-3和.arrow-sprite-4放置在顶部.arrow-sprite-5。它实际上工作，但是它创造了它下面的空间。 – Natzin