0

高さ 175 ピクセルの背景が適用された高さ 200 ピクセルの DIV がある場合、画像のみにアンカーをラップする方法はありますか?

<div style="background: url('http://www.crmpicco.co.uk/downloads/Image/11218.jpg') no-repeat scroll 0 0 transparent; background-position: bottom;" class="block block2 ">
    <ul class="elem"></ul>
    <span class="left_border"></span>       
</div>

マークアップを再構築する以外に、私に飛びつくものは何もありません。この段階では避けたいと思います。

4

4 に答える 4

5

親 div (背景を持つもの) にいくつかの css を与える場合:position:relative

その後、次のようにアンカーを作成できます。

.block2 a.block_link {
    position:absolute;
    bottom:0;
    height:175px;
    left:0px;
    width:100%;
    z-index:1;
    background-image:url(transparent.png);
    text-indent:-9999px;
}

注意: IE のバグを修正するには、透明な png をリンクに適用してください。

<div style="background: url('http://www.crmpicco.co.uk/downloads/Image/11218.jpg') no-repeat scroll 0 0 transparent; background-position: bottom;" class="block block2 ">
    <ul class="elem"></ul>
    <span class="left_border"></span>    
    <a href="#" class="block_link">&nbsp;</a>   
</div>

リンクの上に他の要素、つまり ul と span を保持するには、.. の css を追加します。

.block2 ul,.block2 span {
    position:relative;
    z-index:2;
}
于 2013-01-28T17:02:05.260 に答える
0

あなたはこれらを行うことができます：

<div style="position:relative; background: url('http://www.crmpicco.co.uk/downloads/Image/11218.jpg') no-repeat scroll 0 0 transparent; background-position: bottom;" class="block block2 ">
   <ul class="elem"></ul>
   <span class="left_border"></span>
   <a href='#'>link</a>       
</div>

リンクのCSS <a>：

.block a{
    display:block;
    width:100%;
    height:25px; // spared height: from the top;
    overflow:hidden;
    text-indent:-99999px;
    position:absolute;
    left:0;
    bottom:0; // or you can try with top:175px;
}
于 2013-01-28T17:08:40.370 に答える
0

コメントにあるように、技術的には背景画像の周りにリンクを配置することはできませんが、その領域をクリック可能にしたいだけだと思いますか？

HTML：

<div id="my-div" style="background: url('http://www.crmpicco.co.uk/downloads/Image/11218.jpg') no-repeat scroll 0 0 transparent; background-position: bottom;" class="block block2 ">
    <ul class="elem"></ul>
    <span class="left_border"></span>      
    <a href="http://www.example.com/"></a> 
</div>

CSS：

#my-div {
position: relative;
}
#my-div a {
display: block;
position: absolute;
top: 0;
left: 0;
height: 175px;
width: 100%;
}

リンクをULと組み合わせてどのように機能させるかは質問からは明らかではありませんが、リストをリンク領域の下に配置するか、クリック可能にする必要がある場合はz-indexを高くする必要があります。

于 2013-01-28T17:08:46.120 に答える
0

div を配置し、背景画像の上に完全に配置し、幅と高さを背景画像の寸法に設定してから、その div の周りにアンカー リンクをラップすることができます。

于 2013-01-28T17:03:39.960 に答える