css - 我们如何将图像放在另一个图像之上

Question

我想把一张图片放在另一张图片上，但我很困惑。这是我到目前为止所做的。

我想要做的是在 main.png 中放置一个 logo.png。但是 main.png 在背景图片中，我想保持这种状态。那么我该如何实现呢

HTML

<div class="ImageMain">
</div>

<div class="LogoMain">
</div>

CSS

  .ImageMain {
        z-index:1;
        position:absolute;
        top:0;
        left:0;
        width:100%;
        height:100%;
        background-image:url(../Resources/Images/HomeMain.jpg);
        background-size:cover;
        background-position:50% 50%;
        background-repeat: no-repeat;
    }

    .LogoMain {
        z-index:2;
        background-image:url(../Resources/Images/Main%20Logo.png);
        position:relative;

    }

我也试过这个。

CSS
.wrapper {
    position:relative;
.ImageMain {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-image:url(../Resources/Images/HomeMain.jpg);
    background-size:cover;
    background-position:50% 50%;
    background-repeat: no-repeat;
}

.LogoMain {
    z-index:2;
    background-image:url(../Resources/Images/Main%20Logo.png);
    position:absolute;

我添加了包装器并将 Logo 位置设置为绝对位置。我还添加了 z 索引。它仍然无法正常工作。

Answer 1

你可以做的是将两个图像包装在一个 div 中，将其位置设置为 relative，将第一个图像留在显示 block 上，并将第二个图像放在绝对位置，top 和 left 为 0。

<div class="wrapper">
  <img src="Main.jpg" alt="Home"/>
  <img src="Logo.jpg" alt="Logo" class="logo"/>
</div>

对于CSS:

.wrapper {
  position: relative;
}

.logo {
  position:absolute;
  top:0;
  left:0;
  z-index:1;
}

这是一个 jsfiddle 来说明解决方案:http://jsfiddle.net/bYwh8/

第二种解决方案是使用 CSS3 多背景，您可以在这个 jsfiddle 中看到一个示例:http://jsfiddle.net/azLPn/并在此处获取更多详细信息 http://www.css3.info/preview/multiple-backgrounds/