在DIV的右上角出现近距离图像

我想知道如何让一个小的十字（近）图像出现在div的右上方。 使用CSS和XHTML。 谢谢

Answer 1

你可以这样做： jsfiddle.net/7JEAZ/1317

代码段：

#panel{ width:100px; height:100px; background:red; } #close{ display:block; float:right; width:30px; height:29px; background:url(https://web.archive.org/web/20110126035650/http://digitalsbykobke.com/images/close.png) no-repeat center center; } 

Answer 2

在它的任何帮助的情况下，这是另一个例子，在DIV的右上角有关闭按钮，代码是一个示例，显示它有两个不同大小的div和jQuery来关闭点击图像的父div。 还有一个链接来重新显示div。

CSS：

 #content{ border: solid black; width: 70%; } #info{ border: solid red; width: 50%; } .close-image{ display: block; float:right; position:relative; top:-10px; right: -10px; height: 20px; } 

HTML：

 Show / Hide content 

 
  Content:
 This is the info inside the div! 
 

 
  Info:
 Click the close button to hide this info!  

jQuery的：

 $(".close-image").click(function() { $(this).parent().hide(); }); $("#toggle-content").click(function() { $("#content").slideToggle(); }); 

一个例子： 点击这里

Answer 3

这个简单的例子可能有所帮 =]

HTML

CSS

 .thumbnail { position: relative; width:300px; height:300px; } .thumbnail img { width:100%; height:100%; } #close { display: block; position: absolute; width:30px; height:30px; top: 2px; right: 2px; background: url(http://icons.iconarchive.com/icons/kyo-tux/delikate/512/Close-icon.png); background-size: 100% 100%; background-repeat: no-repeat; } 

示例： http ： //jsfiddle.net/PPN7Q/26/