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;

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

Answer 1

你可以做的是将两个图像包裹在div中，将其位置放在相对位置，将第一个图像保留在显示块上，然后将第二个图像放在绝对位置，顶部和左侧为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/

Answer 2

最简单的方法：

<强> HTML：

<div class="wrapper">
  <img src="image1.jpg" id="image1"/>
  <img src="image2.jpg" id="image2"/>
</div>

<强> CSS：

#image1{
  position:absolute;
  top:0px;
  left:0px;
}

#image2{
  position:absolute;
  top:0px;
  left:0px;
}

在此阶段，image2已经在image1上。如果您希望image2在image1上并且image1部分可见，请添加：

#image2{
  z-index:2;
  opacity: 0.75;
}

“不透明度”使元素透明。不透明度：0.75表示图像2为75％实体，25％为透明。

希望这有帮助

Answer 3

我通常做的是在div中包含图像标记，并为该div添加背景图像。

更新：我看到你解决了问题，就像我说的那样，非常好！现在，要正确居中一个绝对定位的div，你可以为每个属性（顶部，底部，右侧和左侧）添加负值，它应该可以工作。

Answer 4

乌拉。我想出了如何用背景图片做到这一点。这是一个小提琴http://jsfiddle.net/RFnu2/1/。

HTML

<div class="wrapper">
  <div id="MainPic"/> </div>
  <div class="Logo" >
    <img src="http://bit.ly/1jSi1Kj" id="MainLogo"/>
  </div>
</div>

CSS

#MainPic{
  position:absolute;
  top:0px;
  left:0px;
  width:100%;
  height:100%;
  background-size:cover;
  background-position:50% 50%;
  background-repeat: no-repeat;
  background-image:url(http://bit.ly/1nv5VHM)
}

#MainLogo{
  position:absolute;
  left:50%;
  top:50%;
  z-index:2;
  width:20%;
}

.logo {
    width:100%;
    height:auto;
}

但我无法弄清楚如何将徽标居中，这样它看起来很有趣，但它仍然有效。

我们如何将图像放在另一个图像的顶部

4 个答案: