Question

我想使用动态数据填充图像百分比。我正在寻找此问题的最佳解决方案。现在，我的第一个想法是将div绝对值设置为相对图像，并且几乎可以使用，但是我不知道为什么我的.fill类的div不会隐藏在图像下。我尝试使用很少的z-index组合，但是没有用。

我的主意还好吗，还是更好的解决方案？

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  background-color: lightcoral;
}

.male {
  position: relative;
  background: url("https://i.imgur.com/UqVu96f.png");
  background-size: cover;
  background-color: lightgray;
  width: 37px;
  height: 157px;
}

.fill {
  position: absolute;
  bottom: 0;
  width: 100%;
  background-color: lightblue;
}

<div class="container">
  <div class="male">
    <div class="fill" style="height: 45%;"></div>
  </div>
</div>

Answer 1

将.fill放在.female之外，可以将其放置在DOM中。

将它们都放入包装纸中，可以将它们整齐地放置在包装纸内，并阻止.fill溢出。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  background-color: lightcoral;
  position: relative;
}

.wrapper {
  position: relative;
  width: 74px;
  height: 157px;
  overflow:hidden;
}

.female {
  position: relative;
  background: url("https://i.imgur.com/qsVFCFh.png");
  background-size: cover;
  width: 74px;
  height: 157px;
  z-index:2;
}

.fill {
  position: absolute;
  bottom: 0;
  width: 100%;
  background-color: lightblue;
  z-index:1;
}

<div class="container">
  <div class="wrapper">
    <div class="female"></div>
    <div class="fill" style="height: 45%;"></div>
  </div>
</div>

Answer 2

改为使用多个背景。您只需要控制各层的顺序即可确定哪一层应位于另一层之上：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  background-color: lightcoral;
}

.female {
  background: 
    url("https://i.imgur.com/qsVFCFh.png") center / cover,
    linear-gradient(lightblue,lightblue)   bottom / 100% var(--p,0),
    lightgray;
  background-repeat:no-repeat;
  width: 74px;
  height: 157px;
}

<div class="container">
  <div class="female" style="--p:45%;">
  </div>
</div>

如何用百分比高度填充图像？

2 个答案: