CSS 绘制下方的空白区域

Question

我的 sprite css 有问题，我提供了一个 jsfiddle，所以你可以明白我的意思。所以你可以观察到图像下方有空间，我似乎无法找到问题所在。这是定位的原因吗？我尝试使用 float，但它只会减少空间。

我想要完成的是删除下面的空格，因为它在我的网站上看起来真的很丑，有空格。

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;
}

Answer 1

尝试将 row 的位置更改为 relative，然后将精灵设置为 position:absolute; 并重新调整精灵的 top 位置即可。

Also set a specific height for the row so that it won't overlap any other content below.

运行下面的片段：

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

CSS 绘制下方的空白区域

CSS sprite empty spaces underneath

html

css

css-sprites

sprite