css - 保持图像包含在另一个图像中。

Question

即使我使用 jquery 更改 img 大小，我如何才能将关闭按钮包含在图像中

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

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

#full_image .close{
 background: url("http://www.sobral.ce.gov.br/saudedafamilia/close.jpg") no-repeat;
 top: 5px; 
 right: 0px;  
cursor: pointer;
height: 29px;
opacity: 1;
position: absolute;    
width: 29px;
z-index: 999;
}


<div id="full_image"><img src="http://coe.berkeley.edu/forefront/fall2005/images/woz1.jpg" />
<span> <a href="#" class="close"></a></span>
 </div>

JSFIDDLE

Answer 1

使用以下 CSS：

#full_image {
    position: relative;
}

#full_image span {
    position: absolute;
    top: 0;
    right: 0;
}

这告诉跨度相对于 定位#full_image，并坚持在它的右上角。

希望这可以帮助 ：）

Answer 2

您没有指定“图像中包含的关闭按钮”的含义。我会尝试像这样放置我的图像和按钮：

HTML：

<div>
    <img id="myImage"></img>
    <button id="myButton" />
</div>

CSS：

#myImage {
    position: relative;
}

#myButton {
    position: absolute;
    top: ???;
    left: ???;
}

jQuery：您必须计算放置按钮的位置（应该为 f extop:和提供 CSS 属性left:）