0

画像の上にアイコンを追加したい。私は次のことを試みていますが、うまくいかないようです：

HTML:

<ul>
    <li>
        <div class="icon">
            <img src="image.jpg" />
        </div>
    </li>
</ul>

CSS:

ul{
    margin: 0;
    list-style: none;
    position: relative;    
}

.icon{
    background : url("icon_quick.gif") no-repeat;
    border: 1px solid red;
    z-index: 2;
    overflow: hidden;
}

デモ: http://jsfiddle.net/tqw4V/

4

4 に答える 4

2

マークアップの変更は必要ありません。コンテンツ イメージ (絵) はマークアップに残り、装飾イメージ (スマイリー) は CSS の一部に残ります。

http://jsfiddle.net/tqw4V/6/

ul{
    margin: 0;
    list-style: none;
    /*position: relative;  */  
}

.icon{
    /*z-index: 2;
    overflow: hidden;*/
    position: relative;
}

.icon:before {
    background: url("http://www.joors.com/se_images/icon_quick.gif") no-repeat;
    height: 100px;
    width: 100px;
    content: '';
    position: absolute;
}
于 2013-03-03T15:08:11.457 に答える
1

背景の上に内側の子を追加しているため、HTML をより適切に変更できます。これにより、内側の子が押しのけられます。

HTML

<ul>
    <li>
        <div class="icon"></div>
            <img src="http://farm9.staticflickr.com/8382/8521029804_2c86ab5a18_m.jpg" />
        </li>
</ul>

CSS

ul{
    margin: 0;
    list-style: none;
    position: relative;    
}

.icon{
    width:100px; height:100px;
    background : url("http://www.joors.com/se_images/icon_quick.gif") no-repeat;
    z-index: 2;
    overflow: hidden;
    position:absolute;
}

JSFiddle。

于 2013-03-03T14:58:46.237 に答える
0

画像を差し替えるだけ。それらの位置を置き換えます。スマイリー フェイスは html に移動し、もう 1 つは css に移動する必要があります。次に、高さと幅によって、コンテナーのサイズを設定できます。私が助けたことを願っています。

于 2013-03-03T14:54:39.710 に答える
0

これを行う1つの方法は次のとおりです。http://jsfiddle.net/tqw4V/1/

残念ながら、マークアップを変更する必要がありますが、機能します。アイデアは、オーバーレイ画像を、メイン要素の上に完全に配置する別の要素にすることです。これは、メイン要素自体が完全に配置されていない場合に、はるかにうまく機能します。

HTML:

<ul>
    <li>
        <div class="icon">
            <img src="http://farm9.staticflickr.com/8382/8521029804_2c86ab5a18_m.jpg" />
            <div class="overlay"></div>
        </div>
        </li>
</ul>

CSS:

ul{
    margin: 0;
    list-style: none;
    position: relative;    
}

.icon{
    border: 1px solid red;
    z-index: 2;
    overflow: hidden;
}

.overlay {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    background: url("http://www.joors.com/se_images/icon_quick.gif") no-repeat;
    z-index: 4;
}
}
于 2013-03-03T14:58:42.097 に答える