0

我想达到什么（目标）...

我正在尝试在 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 覆盖在 wrap div 上，将其设置为不透明度 < 1 并更改其背景颜色。

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

4

2 回答 2

0

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

因此，最初只需使用 display:none（或左：-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>
于 2013-02-06T12:11:17.440 回答
0

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

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

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

小提琴：http: //jsfiddle.net/jamiefearon/BY9Fp/

将鼠标悬停在 Tile1 上以查看效果。

于 2013-02-06T12:21:49.033 回答