Question

我有一张图片地图（抱歉草率绘图...）

数字表示x坐标，y坐标，宽度，高度。例如，5, 5, 25, 25表示此图片位于(5, 5)且width 25px和height 25px。

（最后一张图片的尺寸错误。100, 5, 5, 25尺寸正确。

我想制作

使用宽度为100px，高度为25px的上图图片。

此时，我使用图像映射如下。

#aDiv {
    width: 25px; height 25px;
    background-image:url('path');
    background-repeat:no-repeat;
    background-position:-5px -5px;
}

带一个标签

<div></div>

为背景。

但我不知道使用第一张图像（图像地图）制作第二张图像。我怎么能这样做？

以上代码就是我所做的。我完全不知道。我的最后一个想法是

#one { 
    display:inline-block;
    width:25px; height:25px;
    background-image:url('path');
    background-repeat:no-repeat;
    background-position:-5px -5px;
}

#two { 
    display:inline-block;
    width:25px; height:25px;
    background-image:url('path');
    background-repeat:no-repeat;
    background-position:-100px -5px;
}


#three { 
    display:inline-block;
    width:5px; height:25px;
    background-image:url('path');
    background-repeat:no-repeat;
    background-position:-50px -5px;
}

<div id="one"></div>
<div id="two"></div>
<div id="three"></div>

但是这样，总宽度只有75像素。我需要重复#two，即重复第三张图像映射。

Answer 1

由于您使用CSS做得很好，我认为您需要的唯一指针就是您可以调整适合您需求的HTML结构：

<div class="panel">
    <div class="panel__top-left"></div>
    <div class="panel__top"></div>
    <div class="panel__top-right"></div>
</div>

通过这种方式，您可以将CSS添加到目标.panel__top-left，.panel__top和.panel__top-right。

Answer 2

由于很难完全理解你想要的东西，这里有两个版本，所以我们从哪里找到一个合适的解决方案。

注意，我在每个div周围添加了一个边框，以便轻松查看它们如何分割/定位图像地图

示例1：3 div使用相同的地图，定位使它看起来仍为1，其中第二个宽度是其余部分的两倍。

div {
    float: left;                /* temp, to set them side by side  */
    border: 1px solid black;    /* temp. for demo purpose          */
    width: 100px; 
    height: 100px;
    background-size: 400px 100px;
    background-repeat: no-repeat;
    background-image: url(https://i.stack.imgur.com/Qsnl6.png);
    background-position: 0 0;
}
div:nth-child(2) {
    width: 200px; 
    background-position: -100px 0;
}
div:nth-child(3) {
    background-position: -300px 0;
}

<div></div>
<div></div>
<div></div>

示例2：改为使用4个div。

div {
    float: left;                /* temp, to set them side by side  */
    border: 1px solid black;    /* temp. for demo purpose          */
    width: 100px; 
    height: 100px;
    background-size: 400px 100px;
    background-repeat: no-repeat;
    background-image: url(https://i.stack.imgur.com/Qsnl6.png);
    background-position: 0 0;
}
div:nth-child(2) {
    background-position: -100px 0;
}
div:nth-child(3) {
    background-position: -200px 0;
}
div:nth-child(4) {
    background-position: -300px 0;
}

<div></div>
<div></div>
<div></div>
<div></div>

Answer 3

由于我们想要设置背景样式，我们应该使用伪元素。也可以更容易地使用多个div。

transform：scaleX（-1）将翻转伪元素。注意背景定位。

：在包含第一个图像之前，aDIV包含第三个图像（----）并且：包含第一个图像的fliped之后。我们也使用z-index：-1将中间图像放在两个背景的bahind上，并通过这个hack丢失垂直边缘。

#aDIV:before
{
content:" ";
width:75px;
height:25px;
background-image:url('path');
background-repeat:no-repeat;
background-position:-5px -5px;
}    

 #aDIV:after
{
content:" ";
width:75px;
height:25px;
background-image:url('path');
background-repeat:no-repeat;
background-position:45px -5px;
transform: scaleX(-1);
}

#aDIV
{
 width:75px;
 height:25px;
 z-index:-1;
 background-image:url('path');
 background-repeat:no-repeat;
 background-position:20px -5px;
}

使用CSS重复来自“图像映射”的背景图像

3 个答案: