html - 如何将图像放在垂直条上方？

Question

我正在使用 flexbox 创建一个排名系统层级，我想在条形图上方添加一个图像(缩略图)，但是我不知道该怎么做。红色圆圈表示图像将在那里，可能是 50x50 像素或更小的图像，但我如何在上面添加图像？

.post-content-wrapper {
    padding: 20px;
    margin-bottom: 2em;
    position: relative;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    background-color: #f7f7f7;
    border-radius: 7px;
    box-sizing: border-box;
}


.flex7 {
    display: flex;
    height: 300px;
    justify-content: space-between;
    align-items: flex-end;
}

.flex {
    background-color: #f7f7f7;
    border-radius: 3px;
    padding: 20px;
}

.flex7-child-1 {
    height: 40%;
}
.flex7-child {
    width: 14%;
}
.child {
    border-radius: 3px;
    background-color: #A2CBFA;
    border: 1px solid #4390E1;
    box-sizing: border-box;
    box-shadow: 0 2px 2px rgba(0,90,250,0.05), 0 4px 4px rgba(0,90,250,0.05), 0 8px 8px rgba(0,90,250,0.05), 0 16px 16px rgba(0,90,250,0.05);
}

.flex7-child-2 {
    height: 50%;
}
.flex7-child-3 {
    height: 60%;
}

.flex7-child-4 {
    height: 20%;
}

.flex7-child-5 {
    height: 30%;
}

<div class="post-content-wrapper">
  <div class="flex flex7">
    <div class="child flex7-child flex7-child-1"></div>
    <div class="child flex7-child flex7-child-2"></div>
    <div class="child flex7-child flex7-child-3"></div>
    <div class="child flex7-child flex7-child-4"></div>
    <div class="child flex7-child flex7-child-5"></div>
  </div>
</div>

Answer 1

你可以使用伪 CSS 类(比如 :after 或 :before) https://www.w3schools.com/css/css_pseudo_classes.asp .此示例仅显示第一个柱的解决方案。

.post-content-wrapper {
    padding: 20px;
    margin-bottom: 2em;
    position: relative;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    background-color: #f7f7f7;
    border-radius: 7px;
    box-sizing: border-box;
}


.flex7 {
    display: flex;
    height: 300px;
    justify-content: space-between;
    align-items: flex-end;
}

.flex {
    background-color: #f7f7f7;
    border-radius: 3px;
    padding: 20px;
}

.flex7-child-1 {
    height: 40%;
    position: relative;
}

.flex7-child-1:before {
    content: '';
    position: absolute;
    background-image: url('https://via.placeholder.com/50.png');
    background-repeat: none;
    background-position: center center;
    background-size: contain;
    top: -60px;
    left: 0;
    right: 0;
    margin: 0 auto;
    display: block;
    width: 50px;
    height: 50px;
}


.flex7-child {
    width: 14%;
}
.child {
    border-radius: 3px;
    background-color: #A2CBFA;
    border: 1px solid #4390E1;
    box-sizing: border-box;
    box-shadow: 0 2px 2px rgba(0,90,250,0.05), 0 4px 4px rgba(0,90,250,0.05), 0 8px 8px rgba(0,90,250,0.05), 0 16px 16px rgba(0,90,250,0.05);
}

.flex7-child-2 {
    height: 50%;
}
.flex7-child-3 {
    height: 60%;
}

.flex7-child-4 {
    height: 20%;
}

.flex7-child-5 {
    height: 30%;
}

<div class="post-content-wrapper">
  <div class="flex flex7">
    <div class="child flex7-child flex7-child-1"></div>
    <div class="child flex7-child flex7-child-2"></div>
    <div class="child flex7-child flex7-child-3"></div>
    <div class="child flex7-child flex7-child-4"></div>
    <div class="child flex7-child flex7-child-5"></div>
  </div>
</div>