Question

首先，我试图在一个JSfiddle中重新创建它，但是无法为此道歉。我在我的网站中使用bootstrap并使用缩略图类来设置我的图像。我正在努力的是在缩略图内的图像顶部放置另一个图像。我已经尽我所能来玩这些职位，但无法解决这个问题

页面位于

http://46.32.253.11/our_team

你会注意到左边是一个别针，我希望它能贴在图片的顶部，就像将图片贴在墙上一样。

理想情况下，我想知道对齐这些图像的规则，以便我可以从中学习，或者如果有人剃须答案，他们可以简要解释发生了什么，所以我再次可以从中学习。

任何帮助都表示赞赏，因为我需要完成这个项目。

由于

Answer 1

您可以在当前标记中使用以下标记来实现。在<img class="team" alt="" src="/assets/teresa.jpg">之外写下<div class="pin"></div>并在CSS中进行以下更改。

<强> HTML

<div class="span4">

    <div class="thumbnail">

        <div class="pin"></div>
        <img class="team" alt="" src="/assets/teresa.jpg">         
        <h4 class="team">Teresa Beggs</h4>
        <p class="team" href="#myModal99" data-toggle="modal">Operations Director</p>

    </div>       

</div>

<强> CSS：

.thumbnail {
    border: medium none;
    box-shadow: none;
    display: block;
    line-height: 1;
    position: relative;
    z-index: 1; /* Added Lower Z-Index Value */
}

.pin {
    background: url("/assets/purplepin.png") no-repeat scroll 0 0 transparent;
    height: 100px; /* Added Height of image */
    width: 100px; /* Added Width of image */
    left: 100px; /* Added Left Position */ 
    position: absolute; /* Added Position */
    top: -20px; /* Added Top Position */        
    z-index: 2; /* Added Higher Z-Index Value from thumbnail div */
}

Answer 2

我检查了问题中提到的链接。

发现对于Pin的图像，如果div具有类名

，则设置背景

“。pin”使用CSS。 o背景图像永远不会出现在人物的图像上。

同时更改“.pin”类的CSS。添加一些宽度作为人的宽度

图像。

我建议你搬家

<img class="team" src="/assets/teresa.jpg" alt=""> out of the <div class="pin">

然后给我HTML，然后我可以告诉你如何在人物的图像上显示引脚。

在引导程序缩略图上重叠图像

2 个答案: