在一行中显示图像并指示选择- HTML和CSS

Question

我想实现的(目标).

我试图在html中显示一行图像(图像名在图像下面)，如下所示：

​

​

当用户单击图像时，我希望在图像上出现一个方块，以指示类似的选择(用户已单击Tile1)：

​

​

​

​

我迄今所做的一切..。

到目前为止，我已经成功地连续显示了这些瓷砖：

​

​

这里是生成上面的图像的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;
}

和一个小提琴展示了上面的例子： 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隐藏覆盖DIVs :none(或左：-9999px)，然后向它们显示onClick。

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>

Answer 2

我接受了Gaurav在评论中所说的，改变了不透明：

<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;
}
#tile1:hover{
    background:red; 
    opacity:0.4; 
}

.tile_wrap {
    display: inline-block;
}
.default_tiles_view_square p {
    text-align: center;
}

Fiddle: http://jsfiddle.net/jamiefearon/BY9Fp/

悬停在Tile1上以查看效果。