Question

我正在尝试使用另一个图像在CSS中重叠半个图像。事情是我想要说出图像的高度（x = 200px）。根据图像的纵横比，图像的宽度会变化。我仍然可以编写CSS，它会将调整大小的图像的一半与另一个图像重叠。

以下是我玩过重叠图像位置的代码。我可以让CSS以某种方式为我做这件事吗？或者是否有一些可以帮助的js？在下面的代码中，我希望高度不变，但所用图像的一半应该在宽度方向上重叠。

<html>
    <head>
        <style type="text/css">

            #collage-container{
                width:300px;
                height: 200px;
                position: relative;
                background:#f22;
            }

            #collage-one, #collage-two{
                height:200px;
                position:absolute;
            }

            #collage-one{
                z-index:1;
                left:100px;
                position:absolute;
            }
        </style>
    </head>
    <body>
        <div id=collage-container>
            <img src="http://www.hack4fun.org/h4f/sites/default/files/bindump/lena.bmp" id=collage-one />
            <img src="http://www.hack4fun.org/h4f/sites/default/files/bindump/lena.bmp" id=collage-two />
        </div>
    </body>
</html>

Answer 1

由于width图片不尽相同，您可以使用CSS transform translate()表达式和percentage value将图片移到与width值相关的一侧：< / p>

<强> EXAMPLE HERE

#collage-container {
  height: 200px;
  position: relative;
}

#collage-container img {
  height: 100%; /* As tall as the container */
  width: auto;
  float: left;
}

#collage-container img + img {  /* Move the second image 50% of its width */
  transform: translateX(-50%);  /*  to the left */
}

值得注意的是， IE9+

支持CSS转换

Answer 2

我认为，这很简单：

<html>
<head>
<style type=text/css>
  .container {
    float:left;
  }
  .half-img {
    display:inline-block;
    width:25%;
  } 
  .clear {clear:left;}
</style>
</head>
<body>
<div class="container">
  <span class="half-img">
    <img src="http://www.hack4fun.org/h4f/sites/default/files/bindump/lena.bmp" width="100">
  </span><img src="http://www.hack4fun.org/h4f/sites/default/files/bindump/lena.bmp" width="100">
</div>
<div class="clear"></div>
</body>
</html>

我可以使用CSS将一半图像与另一幅图像重叠吗？

2 个答案: