0

以下のCSSコードと、その出力を示す画像があります。私は助けが必要ですが、2つのことがあります。

  1. このコードは、写真にユーザー名を表示するのに非常にうまく機能しますが、今日、一日中クロムを頻繁に使用しているときに、このコードを含む画像のあるページに移動するリンクをクリックすると、名前が表示されないことに気付きました画像の下に名前が表示されるだけで、透明な黒い div はまったく表示されず、名前も画像に表示されません。その後、ページを更新すると正常に動作します。何が原因でしょうか、これは私の PC がメモリ不足のように動作していたときでした。それが問題の一部である可能性はありますか?

  2. 画像の上部にバーを表示したいと思います。これは画像の幅で、高さはおそらく 2 ～ 3 ピクセルで、背景色は青色のようです。私が達成したいのは、女性のユーザーにはピンクのバーが表示され、男性には別の色の画像が表示されることです。cssを知っている人がこれを修正して最善を尽くすのを手伝ってくれませんか

代替テキスト

<style type="text/css">
div.imageSub { position: relative; }
div.imageSub img { z-index: 1; }
div.imageSub div {
    position: absolute;
    left: 0px;
    right: 0px;
    bottom: 0;
    padding: 5px;
    height: 5px;
    line-height: 4px;
    text-align: center;
    overflow: hidden;
}
div.imageSub div.blackbg {
    z-index: 2;
    background-color: #000;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
    filter: alpha(opacity=70);
    opacity: 0.5;
}
div.imageSub div.label {
    z-index: 3;
    color: white;
}
</style>

<div class="imageSub" style="width: 90px;"> <!-- Put Your Image Width -->
    <img src="http://cache2.mycrib.net/images/image_group66/0/43/t_6871399b0962b5fb4e29ce477541e165950078.jpg" alt="Something" width="90"/>
    <div class="blackbg"></div>
    <div class="label">Sara</div>
</div>
4

1 に答える 1

5

私はあなたのためにこのコードを書いたので、私もそれを修正しようとするのは論理的だと思われます...

要素の高さがわからないので、Chromeは苦労しているようです。配置の代わりにマージンを使用しましょう

また、設定された高さを使用しているため、配置をまとめて削除し、次の CSS を使用できます (この場合、上記のコードは必要ありません)。

div.imageSub img { z-index: 1; margin: 0; display: block; }
div.imageSub div {
    position: relative;
    margin: -15px 0 0;
    padding: 5px;
    height: 5px;
    line-height: 4px;
    text-align: center;
    overflow: hidden;
}
div.imageSub div.blackbg {
    z-index: 2;
    background-color: #000;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
    filter: alpha(opacity=70);
    opacity: 0.5;
}
div.imageSub div.label {
    z-index: 3;
    color: white;
}

編集:性別の上部に色付きのバーを要求しました。次の HTML を使用できます。

<div class="imageSub" style="width: 90px;"> <!-- Put Your Image Width -->
    <img class="female" src="http://cache2.mycrib.net/images/image_group66/0/43/t_6871399b0962b5fb4e29ce477541e165950078.jpg" alt="Something" width="90"/>
    <div class="blackbg"></div>
    <div class="label">Sara</div>
</div>

次の CSS を使用します。

div.imageSub img.female { border-top: 10px solid red; }
div.imageSub img.male { border-top: 10px solid blue; }
于 2009-07-28T05:44:22.887 に答える