Question

我有一个多人html游戏（不使用画布），你有一个角色的肖像和你正在对战的角色的肖像。如果他们还没有加载他们的页面，我想在他们的对手角色图像上放置一个图像。图像会说＆＃34; Not Ready＆＃34;当他们准备好时，我将删除此图像。

我使用bootstrap来定位所有东西，而我之前见过的答案都谈到了绝对定位。我怎样才能定位这个＆＃34; Not Ready＆＃34;使用以下代码显示的角色肖像顶部的图像？

我对人物肖像的展示是：

    <!--Portraits-->
    <div id="divPortraitRow" class="row" style="margin-bottom: 10px;">
        <div id="divPlayer" class="col-md-6 text-center">
            <img src="@Model.Player.Icon" />
        </div>

        <div id="divOpponent" class="col-md-6 text-center">
            <img src="@Model.Opponent.Icon" />
        </div>
    </div>

Answer 1

如果我没弄错，人物肖像图片是<img src="@Model.Player.Icon" />？然后，您希望在当前图像旁边（以及<div id="divPlayer" class="col-md-6 text-center">内）包含新的占位符图像，如下所示：

 <div id="divPlayer" class="col-md-6 text-center">
   <img src="@Model.Player.Icon" />
   <img src="NEW IMAGE" /> <----new image here (order is not important)
 </div>

新图片将设置为position: absolute，父图片<div id="divPlayer" class="col-md-6 text-center">需要设置为position: relative，否则absolute图片会相对于正文。

EXAMPLE FIDDLE

使用引导程序将图像放在另一个图像的顶部

1 个答案: