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

检查这个小提琴。这是你想要的吗？

我创建了一个DIVwithfull_image ID并将图像设置为background.
然后我将它们都添加close button到DIV并position-ed 中。
因此，尽管大小，close button它将始终位于右上角。imageimage

于 2013-08-28T20:38:14.883 回答