html - CSS Sprite 下面的空白

我的Sprite CSS遇到问题，我提供了一个jsfiddle，这样您就可以明白我的意思了。因此，您可以观察到图像下方有空间，而我似乎找不到问题所在。这是因为定位吗？我尝试使用float，但是它只会减少空间。

我要完成的操作是删除下面的空格，因为它在我的网站上确实很丑陋。

PS。另外，如果我使用绝对值，它将与我网站中的文本重叠。

JsFiddle

的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位置即可解决问题。


  还要为height设置一个特定的row，以使其不会重叠
  下面的任何其他内容。


运行以下代码段：

.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>