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;

}

我希望图像并排、重叠。喜欢这个网站示例

我怎样才能做到这一点？我想插入图像并将它们按照设计的方式放置在背景中。

现在这是一个简单的背景图像，我必须插入两把带有过渡效果的吉他，但我无法弄清楚。

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，因为它看起来也很好。

Answer 2

最好的方法是float图像。这就是您链接到的网站的操作方式。

HTML

<img src="http://lorempixel.com/100/100/city/" />
<img src="http://lorempixel.com/100/100/city/" />
<img src="http://lorempixel.com/100/100/city/" />
<img src="http://lorempixel.com/100/100/city/" />

CSS

img {
    float: left;
    padding: 10px;
}

http://jsfiddle.net/HCQLF/

上面的例子提供了最基本的用法。您可能需要一个包含所有图像的元素，并且可能需要将它们插入到无序列表之类的东西中。