Question

我如何将图像放在图像上？例如标题图片上的社交图片。

代码：

<div>
  <img src="http://img2.wikia.nocookie.net/__cb20100409185740/gtawiki/images/e/e7/Fort_carsonn.jpg" width="1200" height="300" />
</div>
<div>
  <img src="http://i12.photobucket.com/albums/a230/buetforasif/FortCarson_ataglance.jpg" width="1200" height="300" />
</div>

<a href="https://www.facebook.com/lordgaming3?fref=ts"> <img src="img/fb.png" style="padding-left: 10px; padding-top:8px" width="30" height="30" /></a>

我想把它放在左上角..任何想法？ background-image是一个错误的想法，因为我的silder脚本使用div和图像..

Answer 1

您可以重叠两个包含两个容器的图像，每个容器包含一个图像，position:relative;应用于容器，position:absolute;应用于图像。

<强> CSS

  div.inner {     
    position:relative;
}
div.outer {
    padding: 20px;
    text-align:center; 
    float:left;  
    position:relative;
}
img{
    position:absolute;
    left:0;
    top:0;
}

<强> HTML

<div class="outer"><img src="http://placehold.it/280x280/fff000" /><div class="inner"><img src="http://placehold.it/240x240/000000" /></div></div>

<强>样本 http://jsfiddle.net/a_incarnati/5ouvn063/5/

css社会形象在图像上

1 个答案: