如何在不使用Javascript的情况下将图像放在另一个图像的左上角？

Question

我在div的中心有一个图像

使用以下css将图像置于父div中心：

img { margin:0px auto; }

图像可以具有任意尺寸。

如何在不使用Javascript的情况下将放大镜（缩放）图像放置在图像的左上角，而主图像可以具有任何宽度或高度？

Answer 1

相对于图像的位置以及放大镜图像的绝对位置可以在这里诀窍演示我所做的事情。

http://jsbin.com/yumelamive/5/edit?html,css,output

Answer 2

用户position:relative和position:absolute。请查看以下HTML和CSS。

<强> HTML

<div class="parent">
  <div class="test"><img src="http://isc.stuorg.iastate.edu/wp-content/uploads/sample.jpg" border="0" />
    <img src="http://www.beyotta.net/images/icon_magnifier.png" border="0" class="absimg" />
  </div>
</div>

<强> CSS

.parent {width:100%; height:400px; border:1px solid blue; text-align:center;}
.test
{  
  display:inline-block;
  position:relative;
}
.absimg
{
position:absolute;
top:5px;
left:5px;
}

FIDDLE DEMO

Answer 3

我不确定它是否会起作用，但尝试使用之前会有所帮助

img:before {
    content: 'img/zoom.png ';
    position:absolute;
    top:0px;
    left:0px;
}

获得适当的帮助至少提供你的工作的jsfiddle或代码

Answer 4

尝试使用此

jsfiddle

div{
content:"";
display:block;
height:300px;
width:300px; 
border:solid 1px #CCCCCC;
background-image: url("http://www.codeproject.com/KB/GDI-plus/ImageProcessing2/img.jpg");
position: absolute;    
}
div:before {
content:"";
background-image: url("http://icons.iconarchive.com/icons/icontexto/search/48/search-red-icon.png"); 
top:0;
left:0;
position:absolute;
width: 40px;
height: 48px;
}

Answer 5

我会为图像制作一个div，将背景设置为图像并添加：

位置：相对;

为那个div。然后将放大镜放在div中并设置：

位置：绝对：顶部：0;左：0;

.image {   背景：网址（eiffel.jpg）;   位置：相对;   宽度：100px;   身高：200px;} .image img {   位置：绝对;   顶部：0;   左：0：}

  

＆＃39;亲戚＆＃39;是什么绝对的＆＃39; objects..relate to。

我希望有所帮助。

Answer 6

将图像放大镜设置为absolute:position并使用left: right:作为正确位置，然后将父div设置为position:relative