1

首先，我尝试在 JSfiddle 中重新创建它，但无法做到，因此对此表示歉意。我在我的网站中使用引导程序并使用缩略图类来设置我的图像。我正在努力将另一个图像放在缩略图内的图像顶部。据我所知，我已经玩过这些位置，但无法解决这个问题

该页面位于

http://46.32.253.11/our_team

你会注意到左边有一个大头针，我希望它贴在图片的顶部，就像把图片贴在墙上一样。

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

感谢任何帮助，因为我需要完成这个项目。

谢谢

4

2 回答 2

2

您可以通过在当前标记中使用以下标记来实现。编写您的<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 */
}
于 2012-07-10T07:31:36.433 回答
-1

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

发现对于 Pin 的图像，如果 div 具有类名，则您正在设置背景

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

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

图片。

建议你搬家

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

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

于 2012-07-10T07:31:13.663 回答