0

画像の上に背景画像を配置しようとしています。

基本的には、「ユーザー」が何かを承認または拒否したかどうかを示します。

ユーザーの表示画像の上に緑色のチェックマークを表示することが承認されたら欲しいです。

私はそれを作成しようとしましたが、私が持っているものは機能しません。

これは私がこれまでに持っているものです：

HTML

<img class="small-profile-img accepted" src="http://www.image.com/image.gif" alt="">

CSS

.small-profile-img{
    width:30px;
    display:inline;
    border:2px solid #000000;
}

.accepted{
    background-image:url("tick.png") !important;
    background-repeat:no-repeat;
    background-position:right bottom;
    z-index:100;
    background-size:18px;
}

動作例については、jsfiddleを参照してください。

jsfiddle

4

5 に答える 5

2

解決策は、クラスafterの疑似要素でラッパーを使用することです。accepted

.accepted:after {
    content: '';
    display: block;
    height: 18px;
    width: 18px;
    position: absolute;
    bottom: 0;
    right: 0;
    background-image:url("http://cdn1.iconfinder.com/data/icons/checkout-icons/32x32/tick.png");
    background-repeat: no-repeat;
    background-position: right bottom;
    z-index: 100;
    background-size: 18px;
}

HTML

<div class="small-profile-img accepted">
    <img src="http://2.bp.blogspot.com/-KLcHPORC4do/TbJCkjjkiBI/AAAAAAAAACw/zDnMSWC_R0M/s1600/facebook-no-image1.gif" alt="">
</div>

http://jsfiddle.net/vpgjr/7/

于 2013-03-15T10:39:45.667 に答える
2

背景画像は、前景コンテンツの背後にあります。An<img>はフォアグラウンド コンテンツです。

背景画像が見える唯一の方法は、前景画像が背景画像の上に半透明のピクセルを持っている場合です。

ただし、目盛りは（装飾ではなく）コンテンツのように見えるため、おそらく<img>とにかくとして表現する必要があります。

<div class="image-container">
    <img class="small-profile-img"
         src="http://www.image.com/image.gif" 
         alt="">
    <img class="approved"
         src="tick.png"
         alt="Approved">
</div>

.image-container { 
    position: relative;
}

.image-container .small-profile-img {
    position: relative;
    z-index: 2;
}

.image-container .approved {
    position: absolute;
    z-index: 3;
    top: 50px;
    left: 50px;
}
于 2013-03-15T10:34:28.297 に答える
0

ええ、私は逆に行きます。受け入れられたときに img のクラスを変更します。

HTML:

<div class='holder'>
    <img  class='unaccepted' src="http://cdn1.iconfinder.com/data/icons/checkout-icons/32x32/tick.png" alt="">    
</div>

CSS:

    .small-profile-img{
        width:30px;
        display:inline;
        border:2px solid #000000;
    }
.holder{
    width:40px;
    height:30px;
    background-image:url("http://2.bp.blogspot.com/-KLcHPORC4do/TbJCkjjkiBI/AAAAAAAAACw/zDnMSWC_R0M/s1600/facebook-no-image1.gif");
    background-size: 100%, 100%;
    background-repeat:no-repeat;
    background-position:center;
    text-align: center;
}

    .accepted{
        border:none;
        display:inline;
    }
.unaccepted{
    display:none;
}
于 2013-03-15T10:54:07.310 に答える
0

設定

position:absolute

次に、左、上 (必要に応じて下、右) プロパティを設定します。

于 2013-03-15T10:37:09.587 に答える
0

position:absolute を使用しない理由

HTML

<div class="wrap">
<img src="http://2.bp.blogspot.com/-KLcHPORC4do/TbJCkjjkiBI/AAAAAAAAACw/zDnMSWC_R0M/s1600/facebook-no-image1.gif" alt="">
    <div class="inner"> <img src="http://cdn1.iconfinder.com/data/icons/checkout-icons/32x32/tick.png" width="18"/></div>
    </div>

CSS

.wrap{
    position:relative;
    background:red;
    height:auto; width:30px;
    font-size:0
}
.wrap > img{
        width:30px;
        display:inline;
    }
.inner{
        position:absolute; 
        top:30%; 
        left:50%;
        margin:-5px 0 0 -9px
}

デモ

于 2013-03-15T10:36:31.463 に答える