1

クリック後に画像のサイズを変更するためにjQueryを使用しています。クリック後の画像のサイズに関係なく、閉じるボタンを右上隅に保持するにはどうすればよいですか。 JSFIDDLE

私のCSS

#full_image {
width: 0px;
height: 0px;
left: 0px;
position: relative;
opacity: 1;
z-index: 9;
}

#full_image img { 
background: url("zoom-on.png") no-repeat;
background-position: 5px 5px;
left: 0px;
width: 339px;
height: 211px;
position: relative;
overflow: hidden;
}

#full_image .full_close{
background: url("zoom-on.png") no-repeat;
top: 10px;     
cursor: pointer;
 height: 29px;
opacity: 1;
position: absolute;    
width: 29px;
z-index: 999;
right: 0px;
}

私のhtml

<div id="full_image"><img src=""/>
<span> <a href="#" class="full_close"></a></span>
</div>

問題は、画像を #full_image 内に保持することはできますが、 #full_image img 内に含める必要があることです。

4

2 に答える 2

1

この CSS を試してください:

#full_image {
    position: relative;
    display:inline-block;
    *display:inline; zoom:1; /* IE7 fix */
    z-index:1;
}
#full_image span {
    background:url("zoom-on.png") no-repeat;
    top: 10px;
    right: 0px;
    width: 32px;
    height: 32px;
    display:none;
    cursor: pointer;
    position: absolute;
    z-index:2;
}
#full_image:hover span {
    display:block;
}

と HTML

<div id="full_image">
    <img src="image.jpg" /> <a href="#" class="full_close" title="Close"><span> </span></a>
</div>

http://jsfiddle.net/r9LDp/4/

于 2013-08-28T20:43:32.073 に答える
0

このFiddleを確認してください。これはあなたが望むものですか？

で を作成しDIV、full_image ID画像を として設定しましたbackground。
次に、 を に追加close buttonし、両方 DIVを編集しました。そのため、サイズに関係なく、 は常に の右上隅にあります。position
close buttonimageimage

于 2013-08-28T20:38:14.883 に答える