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/

Answer 2

检查Fiddle。这是你想要的吗？

我使用DIV full_image创建了ID，并将图片设置为background。
然后我已将close button添加到DIV和position - 两者中。
因此close button始终位于image的右上角，尽管image大小。

Answer 3

检查解决方案here 我已经编辑了full_close类

的CSS

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

#full_image img { 
    left: 10px;
    width: 250px;
    height: 211px;
    position: relative;
    overflow: hidden;
}

#full_image .full_close{
    background-color: red;
    top: -180px;     
    cursor: pointer;
     height: 29px;
    width: 10px;
    opacity: 1;
    position: absolute;    
    width: 29px;
    z-index: 999;
    left: 90%;
}

试图将图像保存在另一个图像中

3 个答案: