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

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/

上面的示例提供了最基本的用法。您可能需要为所有图像添加包含元素，并且可能需要将它们插入到无序列表中。

如何将图像与css对齐

2 个答案: