css - 如何从单个图像中使用 css 精神显示向导

Question

我现在有上面的图片，使用 css 如何显示如下图片。

我对此完全陌生。我试过这个：

.step{
    background-image: url(images/myimage.png);
    background-repeat: no-repeat;
    background-position: 40px -40px;
}

从上面我可以看到灰色图像如何将橙色图像覆盖在灰色上？

Answer 1

我认为您不能像问题中那样使用单个类和单个元素来做到这一点，而不是使用该图像（因为圆圈有边框，因为里面的数字等）。

您实际上可以做的是使用CSS3 multiple background images功能（看看一篇关于它的好文章），在您的情况下，将两次相同的图像放置在两个不同的地方，一个在另一个；

这是你可以走多远：http: //jsfiddle.net/APNZL/

如您所见，有几个缺点：数字应该以另一种方式添加，中间的圆圈正在切割灰线，最后一个圆圈需要被div宽度限制以覆盖下一条灰线......

---

但是您可以使用两个不同的 div 来做到这一点，一个带有空背景图像，另一个带有“完整”的一个，使用绝对位置将一个放在另一个上，限制第一个图像的宽度，并使用 z-index.. .

工作演示：http: //jsfiddle.net/APNZL/1/

代码（您将只使用一个容器并将类更改为第一个 div，这只是一个向您展示所有可能性的测试用例）：

<div class="container">
    <div class="nosteps"></div><div></div>    
</div>

<div class="container">
    <div class="onestep"></div><div></div>    
</div>

<div class="container">
    <div class="twosteps"></div><div></div>    
</div>

<div class="container">
    <div class="threesteps"></div><div></div>    
</div>


.container{        
    margin: 20px;
    width: 230px;
    position: relative;
    height: 40px;    
}
.container div{    
    width: 230px;
    height: 40px;
    background-image: url(http://i.stack.imgur.com/6jKtl.png);
    background-repeat: no-repeat;
    background-position: 0px 0px;
    position:absolute;
    left:0;
    top: 0;
    z-index: 2;
}
.container div + div{
    z-index: 1;
    background-position: 0px -40px;
}

div.nosteps {
    width: 0px;    
}
div.onestep {
    width: 70px;    
}
div.twosteps {
    width: 140px;    
}
div.threesteps {
    width: 230px;    
}

Answer 2

您可能的目标是制作那些可点击的链接。

您想要的第一件事是创建一个适合您的设计的 html 结构器。在你的情况下：

<div class="spirit">
    <div class="button1"></div>
    <div class="button2"></div>
    <div class="button3"></div>
</div>

然后您可以使用以下设置每个按钮的样式

.spirit .button1 {display:inline-block;background:url('http://i.stack.imgur.com/6jKtl.png'); width:70px; height:40px; background-position:0px 0px;overflow:hidden;}

当有人单击链接或将鼠标悬停在链接上时..您需要执行以下操作：

.spirit .button1:hover, .spirit .button1:active {display:inline-block;background:url('http://i.stack.imgur.com/6jKtl.png'); width:70px; height:40px; background-position:0px 0px;overflow:hidden;}

您可以使用背景位置控制图像位置

更多信息可以在这里找到：来源