Question

在https://es.ikariam.gameforge.com/，页面底部会显示三条船。使用devtools检查元素会发现它们属于具有唯一ID的不同div，如下所示：

div#ship-2，div#ship-1和div#submarine

值得注意的是，所有div都为backgrounds共享相同的图片，每种情况都采用不同的部分/切片。

我如何使用CSS实现这一点？

Answer 1

关于三艘船的技术涉及创建CSS sprite，在这种特殊情况下需要代码操纵给定图像的高度，宽度，底部和左或右属性。您可以使用浏览器的“检查”功能自行检测该信息，该功能显示每个容器的以下CSS代码，如下所示：

#ship-1 {
    background: url(//gf3.geo.gfsrv.net/cdnb1/12ae07bab9d5fd778d5234c27f4d87.png) no-repeat 0 0;
    height: 192px;
    width: 345px;
    bottom: 10%;
    left: 10%;
}

#ship-2 {
    background: url(//gf3.geo.gfsrv.net/cdnb1/12ae07bab9d5fd778d5234c27f4d87.png) no-repeat -346px 0;
    height: 224px;
    width: 280px;
    bottom: 6%;
    left: 0;
}

#submarine {
    background: url(//gf3.geo.gfsrv.net/cdnb1/12ae07bab9d5fd778d5234c27f4d87.png) no-repeat -626px 0;
    height: 174px;
    width: 260px;
    bottom: 2%;
    right: 0;
}

请参阅demo

将图像的不同部分作为两个div的背景

1 个答案: