html - 具有 3 层的高级 HTML/CSS block

Question

我正在尝试像图像上那样构建 block 。 有 3 个或更多 block 的 1 个 strip 。在每个 block 下放置数字(内容:计数器？)。每个街区可能都有自己的背景，但我还是想看看这个数字。任何想法如何预制这样的想法？我尝试使用 z-index，但没有成功。

link on fiddle

  .element:before{
    content: counters(el-list, "") ". ";
    font-size: 40px;
    z-index:2;
    color:#fff;
    position:absolute;
    margin-left:-10px;
  }

.element{
    height:50px;
    background:#333;
    margin:10px;
    width:50px;
    float:left; 
    counter-increment: el-list;
     z-index:3;
}

Answer 1

我用了三层。一个主容器、包装器和内部内容 div。 计数器作为它们的 :before 元素绑定(bind)到包装器。

jsFiddle 在这里: jsShizzle

HTML。

<div class="main">
    <div class="wrapper">
        <div class="content">
            <img src="http://lorempixel.com/160/60">
        </div>
    </div>
    <div class="wrapper">
        <div class="content">
            <img src="http://lorempixel.com/160/60">
        </div>
    </div>
    <div class="wrapper">
        <div class="content">
            <img src="http://lorempixel.com/160/60">
        </div>
    </div>
    <div class="wrapper">
        <div class="content">
            <img src="http://lorempixel.com/160/60">
        </div>
    </div>
</div>

和 CSS。

..你可能想多摆弄一下就在这里。它就在我的脑海中，可能有一些不必要的规则。

.main {
    overflow: visible;
    background: rgba(0, 0, 0, 0.2);
    counter-reset:el-list;
    overflow:hidden;
    height: 80px;
}
.wrapper {
    counter-increment: el-list;
    float:left;
    position: relative;
    margin: 10px;
}
.wrapper:before {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    max-width: 50px;
    padding-left: 10px;
    font-size: 82px;
    color: #fff;
    content: counters(el-list, "")". ";
}
.wrapper:hover:before {
    color: #000;
}
.content {
    display: inline-block;
    opacity: 0.8;
    height: 60px;
    background:#333;
    margin-left: 30px;
}
.content:hover {
    opacity: 0.4;
}