叠加几张图片

扫码查看
本文介绍了叠加几张图片的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有三个要覆盖的图像(使用HTML + CSS,如果可能,我不想使用javascript)

I have three images which I want to overlay (with HTML + CSS, I do not want to use javascript if possible):



这是我想要实现的结果:
[image4]



This is the result which I would like to achieve:
[image4]

这是我尝试过的:

CSS:

.imageContainer {
    position: relative;
}

#image1 {
    position: absolute;
    top: 0;
    z-index: 10;

    border: 1px solid blue;
}
#image2 {
    position: absolute;
    top: 0;
    z-index: 100;

    border: 1px solid fuchsia;
}
#image3 {
    position: absolute;
    top: 0;
    z-index: 1000;

    width: 10%;
    height: 10%;

    border: 1px solid green;
}

HTML:

<div class="imageContainer">
    <img id="image1" src="http://i.stack.imgur.com/Es4OT.png"/>
    <img id="image2" src="http://i.stack.imgur.com/WQSuc.png"/>
    <img id="image3" src="http://i.stack.imgur.com/Xebnp.png"/>
</div>​

image1 :主"图像(image1应该为imageContainer设置最大高度和最大宽度-上面的HTML格式) [蓝色边框]
image2 :水平对齐:居中; top:0; 相对于image1 [粉红色边框]
image3 :相对于image1 [绿色边框]

image1: "main" image (image1 should set max height and max width for an imageContainer - se HTML above) [blue border]
image2: horizontal-align: center; and top: 0; relative to image1 [pink border]
image3: resized by 10% from its' origin size, horizontal-align: center; relative to image1 [green border]

我的容易出错的HTML + CSS导致了以下结果:

My error prone HTML + CSS resulted in this:

我不知道CSS应该如何.我应该怎么做才能获得像[image4]这样的结果?

I can't figure out how my CSS should be. What should I do to achieve a result like [image4]?

推荐答案

您可以使用一个div和更多背景作为示例,例如:

You can make it with one div and more background for example:

#someDiv
{
  background: url('topImage.jpg') center,
            url('imageInTheMiddle.jpg') 0px 0px,
            url('bottomImage.jpg') /*some position*/;
}

这是显示它的更简单方法.当然,在我放置定位值的地方,您必须添加一个.

It was the easier way to display it. Of course in place where I placed positioning values you must add yours one.

更新

在您说完之后,我想您可以在背景中使用3个绝对定位div,并使用css3 transform 属性对其进行操作.它使您可以旋转,缩放以及使用元素进行更多操作.您还可以使用javascript对其进行操作.

In the case which you say after, I think you can use 3 absolute positioning divs with your backgrounds and manipulate them with css3 transform attribute. It gives you possibility to rotate, scale and much more with your elements. And you can also manipulate it with javascript.

有关css3转换的更多信息

这篇关于叠加几张图片的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

05-28 09:07
查看更多