Question

我有两张照片。一个在另一个上面。当我调整浏览器窗口的大小时，图像必须放在相同的位置。我如何实现这一目标？

这是我的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星的飞马座图像。我正在为一个视差网站做这件事。

Answer 1

您可以将样式标记添加到html代码。

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

对你来说，重要的参数是左（x）和上（y）。

Answer 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上面使用了锚标记。您可以使用自己的标签，例如。 IMG。重要的是应该使用的样式是左侧和顶部。这将将image2定位在image1的顶部，距离10px左侧和92px顶部，并且可以看到div的顶部，左侧=（0,0）

Answer 3

尝试图像交叉淡入淡出。

更多信息和演示：here

或fiddle

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

如何使用CSS和HTML实现两个图像？

3 个答案: