html - 试图将图像包含在另一个图像中

Question

我正在使用 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 中

Answer 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/