html - 如何将图像与 css 对齐

Question

我有这个代码:jsfiddle

<div id="picture1">
    <a href="http://www.google.com" target="_blank"><img src="http://farm4.staticflickr.com/    3780/9455263123_9150ae4a6e_o.png" /></a>
</div>


<div id="picture2">
    <a href="http://www.google.com" target="_blank"><img src="http://farm6.staticflickr.com/   5483/9458043690_5bce524ccf_o.png" /></a>
</div>

和CSS

    #picture1        {
     top:-10px;
   left: 190px;
   right: auto;
    float:right;
}

 #picture2        {
     top:-10px;
   left: 50px;
   right: auto;
    float:left;
}

img {
    position:relative;
    top:-10px;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;

}

我希望图像并排重叠。点赞本站example

我该怎么做？我想插入图像并将它们按照设计放在背景中。

现在这是一个简单的背景图片，我必须插入带有过渡效果的两把吉他，但我想不通。

Answer 1

您可以使用定位和 z-index 控件，例如:

#pic {
z-index:100;
position: absolute;
top:0;
left:0;
}
#pic2 {
z-index:999;
position: absolute;
top:0;
left:100px;
}

通过将这些 ID 应用于两个单独的图像，您可以获得所需的结果，但它会扰乱您的转换，并且您需要 PNG，因为它看起来也不错。