html - 连续显示图像并指示选择 - HTML 和 CSS

Question

我想达到的(目标)...

我试图在 html 中显示一行图像(图像下方有图像名称)，如下所示:

当用户点击图像时，我希望在图像上出现一个正方形，以指示选择，就像这样(用户点击了 Tile1):

---

到目前为止我做了什么......

到目前为止，我已经成功地显示了一行中的图 block :

这是生成上图的 html 代码:

<div id='default_tiles_view'>
    <div class="default_tiles_view_square" id="tile1">
        <img src="https://raw.github.com/andrespagella/Making-Isometric-Real-time-Games/master/img/tile.png">
        <p>Tile1</p>
    </div>
    <div class="default_tiles_view_square" id="tile2">
        <img src="https://raw.github.com/andrespagella/Making-Isometric-Real-time-Games/master/img/dirt.png">
        <p>Tile2</p>
    </div>
</div>

和 CSS:

#default_tiles_view {
    width: 490px;
    height: 160px;
    overflow-y: auto;
}
.default_tiles_view_square {
    display: inline-block;
}
.default_tiles_view_square p {
    text-align: center;
}

还有一个显示上面例子的 fiddle : http://jsfiddle.net/jamiefearon/t8d6U/

---

实现目标的策略...

我正在考虑将图像及其标题包装在一个 div 中，然后更改该 div 的背景颜色。这是结果和代码:

HTML:

<div id='default_tiles_view'>
    <div class="tile_wrap" id="tile1">
        <div class="default_tiles_view_square">
            <img src="https://raw.github.com/andrespagella/Making-Isometric-Real-time-Games/master/img/tile.png">
            <p>Tile1</p>
        </div>
    </div>
    <div class="tile_wrap" id="tile2">
        <div class="default_tiles_view_square">
            <img src="https://raw.github.com/andrespagella/Making-Isometric-Real-time-Games/master/img/dirt.png">
            <p>Tile2</p>
        </div>
    </div>
</div>

CSS:

#default_tiles_view {
    width: 490px;
    height: 160px;
    overflow-y: auto;
}
.tile_wrap {
    display: inline-block;
}
.default_tiles_view_square p {
    text-align: center;
}
#tile1 {
    background-color:red;
}

---

问题..

看起来不太好，实际图像没有被红色覆盖。也许可以在包裹 div 上覆盖一个 div，将其不透明度设置为 < 1 并更改其背景颜色。

怎么想的？是否有人对实现目标的好方法有任何想法？

Answer 1

像这样的东西应该可以解决问题:http://jsfiddle.net/t8d6U/1/

因此，只需使用 display:none(或例如 left:-9999px)隐藏覆盖 DIV，然后在点击时显示它们。

CSS:

#default_tiles_view {
    overflow: auto;
}

.default_tiles_view_square {
    float: left;
    margin: 5px 10px 10px 10px;
    position: relative;
    height: 128px;
    width: 128px;
}
.default_tiles_view_square p {
    text-align: center;
}

.content {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
}

.overlay {
    position: absolute;
    z-index: 2;
    background: red;
    opacity: 0.5;
    height: 128px;
    width: 128px;
    top: 0;
    left: 0;
}

HTML:

<div id='default_tiles_view'>

    <div class="default_tiles_view_square" id="tile1">
        <div class="content">
         <img src="https://raw.github.com/andrespagella/Making-Isometric-Real-time-Games/master/img/tile.png">
         <p>Tile1</p>
        </div>
        <div class="overlay"></div>
    </div>

    <div class="default_tiles_view_square" id="tile2">
        <div class="content">
         <img src="https://raw.github.com/andrespagella/Making-Isometric-Real-time-Games/master/img/dirt.png">
         <p>Tile2</p>
        </div>
        <div class="overlay"></div>
    </div>

</div>