1

まず、JSfiddle内でこれを再作成しようとしましたが、作成できませんでした。そのため、お詫び申し上げます。サイト内でブートストラップを使用し、サムネイルクラスを使用して画像を設定しています。私が苦労しているのは、サムネイル内の画像の上に別の画像を配置することです。私は自分の知る限りポジションをいじってみましたが、これを回避することはできません

ページはにあります

http://46.32.253.11/our_team

左側のピンに気付くでしょう。壁に写真を貼り付けるように、写真の上部に貼り付けてください。

理想的には、このような画像を配置して、これから学ぶことができるようにするためのルールを知りたいと思います。または、誰かが答えを剃った場合、何が起こっているのかを簡単に説明できるので、これから学ぶことができます。

このプロジェクトを完了する必要があるので、どんな助けでもありがたいです。

ありがとう

4

2 に答える 2

2

現在のマークアップで次のマークアップを使用して作成できます。CSSの<img class="team" alt="" src="/assets/teresa.jpg">外側に書き込み、次の変更を加えます。<div class="pin"></div>

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

質問に記載されているリンクを確認しました。

ピンの画像の場合、クラス名を持つdivの場合は背景を設定していることがわかりました

CSSを使用した「.pin」。o背景画像が人物の画像に表示されることはありません。

また、「。pin」クラスのCSSを変更します。人の幅としてこれにいくらかの幅を追加します

画像。

移動することをお勧めします

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

次に、HTMLを教えてください。そうすれば、人物の画像にPINを表示する方法を教えてくれます。

于 2012-07-10T07:31:13.663 に答える