代码之家 › 专栏 › 技术社区 › sosick

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

css html

sosick · 技术社区 · 6 年前

我想用动态数据填充我的图像百分比。我正在寻找这个问题的最佳解决方案。现在,我的第一个想法是将DIV绝对设置为相对图像,它几乎可以工作,但我不知道为什么我的DIV .fill 类不隐藏在图像下。我试过用少量的 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;
}

.female {
  position: relative;
  background: url("https://i.imgur.com/qsVFCFh.png");
  background-size: cover;
  background-color: lightgray;
  width: 74px;
  height: 157px;
}

.fill {
  position: absolute;
  bottom: 0;
  width: 100%;
  background-color: lightblue;
}

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

2 回复 | 直到 6 年前

Temani Afif 6 年前

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

Adam 6 年前

.fill .female DOM

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

推荐文章

Jamie · 在CSS链接的文件名中添加Jinja占位符

6 月前

Mass · 如何在Tailwind CSS v4中创建配置

6 月前

magenta placenta · 将css变量合并为一个变量

6 月前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

6 月前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

6 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

6 月前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

6 月前

Ben Halicki · 带有垂直和水平滚动条的表,使用HTML/CSS/Bootstrap-5固定行和列

6 月前

Luckkks · 过渡色工作不正常

6 月前

ModernEraCaveman · 如何对齐我的Bootstrap容器以适应网页的整个宽度?

6 月前