0

画像をオーバーレイしようとしています。少し前にやったことがありますが、なぜか今日は明らかに何かを忘れています。親ではなく、ページ全体の幅を取るようです。

    #work_item {
        position: relative;
        width: auto;
    }

    #work_item img {}

    #work_item a {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 30;
        height: 100%;
        width: 100%;
        background: #000;
        color: #FFF;
           }

            <div id='work_item'>
        <img src="" />
        <a href="#">Click Here!</a>
    </div>

ヘルプはありますか？

4

3 に答える 3

1 
#work_item {
    display: inline-block;
    position: relative;
    left: 0px;
    top: 0px;
    z-index: 1;
    height: auto;
    width: auto;
}

#work_item img {
    position: relative;
    z-index: 1;
    left: 0px;
    top: 0px;
}

#work_item a {
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 30;
    height: 100%;
    width: 100%;
    background: rgba(0,0,0,0.8);
    color: #FFF;
}​

<div id='work_item'> 
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQfMwj05-cLtN4hGPTSKJcsElDOeNTW65rlmQKXzRo5ZCbFmvuY0dccZMU" /> 
    <a href="#">Click Here!</a> 
</div>

デモ： http： //jsfiddle.net/38v3h/

于 2012-10-12T10:39:43.120 に答える
0

#work_item：を意味する場合は、このコードを追加します。

#work_item {
    position: relative;
    width: auto;
    display: inline-block;
}

フィドル： http： //jsfiddle.net/CRY3g/

于 2012-10-12T10:12:34.370 に答える
0

divコンテンツの幅に関係なく、親の幅全体を占めるブロック要素です。#work_itemdivを作成してコンテンツをラップする方法はたくさんあります。

インラインブロックを表示します。

    #work_item {
        position: relative;
        width: auto;
        display inline-block;
    }

divをフロートさせることもできます：

  #work_item {
        position: relative;
        width: auto;
        float: left;
    }
于 2012-10-12T10:30:28.250 に答える