我有这个代码: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
我该怎么做?我想插入图像并将它们按照设计放在背景中。
现在这是一个简单的背景图片,我必须插入带有过渡效果的两把吉他,但我想不通。
最佳答案
您可以使用定位和 z-index 控件,例如:
#pic {
z-index:100;
position: absolute;
top:0;
left:0;
}
#pic2 {
z-index:999;
position: absolute;
top:0;
left:100px;
}
通过将这些 ID 应用于两个单独的图像,您可以获得所需的结果,但它会扰乱您的转换,并且您需要 PNG,因为它看起来也不错。
关于html - 如何将图像与 css 对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18105457/