如何使用 CSS 和 HTML 实现两个图像重叠？答案

【问题标题】：How to achieve two images one over the other using CSS and HTML?如何使用 CSS 和 HTML 实现两个图像重叠？
【发布时间】：2015-04-29 21:46:59
【问题描述】：

我有两张图片。一个比一个。当我调整浏览器窗口的大小时，图像必须放在相同的位置。我如何做到这一点？

这是我的html代码：

  <div id="stars-container">
                <div id="star-1" class="stars"
                 data-1000p="position:absolute;opacity:0;"
                 data-1010p="position:absolute;opacity:1;"
                 >
                    <img src="img/stars/1.png" alt="">
                </div>
</div><!-- end of stars-container -->

 <!-- Pegasus bg starts -->
                <div class="pegasus"
                 data-1000p="opacity:0;"
                 data-1270p="opacity:1;">
                    <img src="img/stars/horse1.png">
                </div> 
                <!-- Pegasus bg ends -->
            </div>
           </div>

这是它的 CSS：

#stars-container{
    height:60%;width:50%;display:block;
    position:relative;
    top:14%;left:20%;z-index:9; 
}
.stars{
    position:relative;
    z-index:9;
}
.stars img{
    position:absolute;
    width:100%;
}   
#star-1{top:25%;left:30%;}
#star-2{top:20%;left:33.5%;}
#star-3{top:25%;left:35%;}
#star-4{top:30%;left:39%;}
#star-5{top:29.5%;left:41.5%;}
#star-6{top:35%;left:42.5%;}
#star-7{top:35%;left:51.5%;}
#star-8{top:30%;left:52.5%;}
#star-9{top:44%;left:48.5%;}
#star-10{top:55.5%;left:47.1%;}
#star-11{top:53%;left:42%; }
#star-13{top:56%;left:37.5%;}
#star-14{top:62%;left:33%;}
#star-15{top:54%;left:42%;}
#star-16{top:49.5%;left:37%;}
#star-17{top:52%;left:33%;}
#star-18{top:51.5%;left:30%;}
.pegasus{
    width:50%;height:50%;
    position:relative;left:20%;
    top:-40%;
}
.pegasus img{
    position:absolute;
    width:100%;
}

所以，在这组 18 颗星的下方基本上有一个飞马座的图像。我正在为视差网站做这件事。

【问题讨论】：

我们可以看看你的实际标记和 css 的小提琴吗？
对不起，伙计！不要有任何小提琴。
这是我的 html: 'code'
您最好将此代码放在您的问题中，使用编辑选项
在调整页面大小时，您是否需要图像像关闭的门一样滑动？

标签： html css

【解决方案1】：

尝试图像交叉淡入淡出。

更多信息和演示：here

或fiddle

#cf {
  position:relative;
  height:281px;
  width:450px;
  margin:0 auto;
}

#cf img {
  position:absolute;
  left:0;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}

#cf img.top:hover {
  opacity:0;
}

<div id="cf">
  <img class="bottom" src="http://addnectar.co.in/ovenfresh/ovenfresh/admin/files/products/Sunny-29-07-2014-img-06-07-40.jpg" />
  <img class="top" src="http://addnectar.co.in/ovenfresh/ovenfresh/admin/files/products/Sunny-29-07-2014-img-07-45-01.jpg" />
</div>

【讨论】：

【解决方案2】：

您可以使用以下代码

<style>
    .image1{
        background : url('<path to image1>') no-repeat;
    }
    .image2{
        background : url('<pat to image2>') no-repeat;
    }
</style>
<div class="image1">
    <a class="image2" href="#" style="left: 10px; top: 92px;"></a>
</div>

以上代码将图像 1 设置为背景图像。我在 image1 上方的图像中使用了锚标记。您可以使用自己的标签，例如。图片重要的是应该使用的样式是左和上。这会将 image2 定位在 image1 的顶部，距离 10px 和顶部 92px，相对于 div 的顶部，left = (0,0)

【讨论】：

谢谢库纳尔。我实际上是以不同的方式来做的，我使用图像标签以避免在 css 中定义的页面加载时图像过载。通过使用图像标签，我将运行一个 javascript 预加载函数，该函数将获取所有 iimage 标签，并且在加载图像之前，该站点不会显示主页。只会显示加载动画。这样做是因为我正在建立一个视差网站，他们就是这样做的。

【解决方案3】：

您可以在 html 代码中添加样式标签。

style="position:fixed;width:36px; height:36px; left:60px;top:50px"

对你来说重要的参数是 left(x) 和 top(y)。

【讨论】：

固定位置不能使用。 div 不会以这种方式调整大小。