html 将3个不同的图像居中放置在彼此的顶部

bvhaajcl 于 2023-02-17 发布在其他

关注(0)|答案(2)|浏览(187)

我有3张图片，所有的图片都有不同的宽度，在CSS中我会用%来控制宽度。试图将这些图片放在彼此的顶部+让它们居中是很棘手的。
通常情况下，我只需要使用Transform：translate（-50%，-50%），并将宽度百分比设置为60%，左右设置为20%，所有这些都是在CSS中进行的，但因为我使用的视差插件使用Transform：它取消了我在CSS中的Transform：translate（Chrome检查器用一条线显示它）。
我需要一种方法来居中的图像，同时仍然让我的宽度%，我想不出一个可靠的方法。
小提琴：https://jsfiddle.net/bcabm0ru/3/

ul {
  padding-left: 0px;
  list-style: none;
}

li {}

.bubbles-one {
  position: absolute;
  z-index: 2;
}

.image-holder {}

.splash {
  z-index: 4;
  position: absolute;
  margin-top: -15%;
}

.spotlight {
  z-index: 3;
  position: absolute;
}

.man {
  z-index: 1;
  position: absolute;
}

<section class="falling-person">
  <div class="bubbles-one"><img src="./assets/images/bubble_01edit.png" alt="" class="img-fluid"></div>
  <div class="container">
    <dov class="row">
      <div class="col-12">
        <div class="image-holder">
          <ul class="falling-scene">
            <li class="layer" id="bubble_splash-layer"><img src="http://www.sharksharkshark.net/testing/assets/images/bubble_splash.png" alt="" class="mx-auto d-block img-fluid splash rellax"></li>
            <li class="layer" id="spotlight-layer"><img src="http://www.sharksharkshark.net/testing/assets/images/spotlight.png" alt="" class="mx-auto d-block img-fluid spotlight rellax"></li>
            <li class="layer" id="man-layer"> <img src="http://www.sharksharkshark.net/testing/assets/images/man.png" alt="" class="img-fluid man rellax"></li>
          </ul>
        </div>
      </div>
    </dov>
  </div>

Html

来源：https://stackoverflow.com/questions/50219612/centering-3-different-images-on-top-of-each-other

2条答案

按热度按时间

j5fpnvbx1#

如果你不希望HTML变得不同，你可以告诉我，但是我发现这种方式更干净，更容易处理。你觉得怎么样？JSFiddle
超文本标记语言

<section class="falling-person">

  <div class="image-wrapper">
    <div class="layer" id="bubble_splash-layer">
      <img class="splash" src="http://www.sharksharkshark.net/testing/assets/images/bubble_splash.png" alt="splash" />
    </div>

    <div class="layer" id="spotlight-layer">
      <img class="spotlight" src="http://www.sharksharkshark.net/testing/assets/images/spotlight.png" alt="spotlight" />
    </div>

    <div class="layer" id="man-layer">
      <img class="man" src="http://www.sharksharkshark.net/testing/assets/images/man.png" alt="man" />
    </div>
  </div>

</section>

中央支助系统

body,
html {
  height: 100%;
  width: 100%;
  margin: 0;
}

.image-wrapper {
  width: 100%;
}

img {
  width: 200px;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
}

.splash {
  position: absolute;
  margin-top: -15%;
  z-index: 4;
}

.spotlight {
  position: absolute;
  z-index: 3;
}

.man {
  position: absolute;
  z-index: 1
}

赞(0）回复(0）举报 2023-02-17

unguejic2#

看起来您正在使用bootstrap 4。您应该可以将li标记更改为：

<li class="layer d-flex justify-content-center" id="bubble_splash-layer">
  <img src="http://www.sharksharkshark.net/testing/assets/images/bubble_splash.png" alt="" class="mx-auto d-block img-fluid splash rellax">
</li>
  <li class="layer d-flex justify-content-center" id="spotlight-layer"><img src="http://www.sharksharkshark.net/testing/assets/images/spotlight.png" alt="" class="mx-auto d-block img-fluid spotlight rellax">
</li>
<li class="layer d-flex justify-content-center" id="man-layer"> 
  <img src="http://www.sharksharkshark.net/testing/assets/images/man.png" alt="" class="img-fluid man rellax">
</li>

赞(0）回复(0）举报 2023-02-17

我来回答

html 将3个不同的图像居中放置在彼此的顶部

2条答案

相关问题

热门标签

最新问答