时间戳

首页 > 解决方案 > 如何只制作 div 背景的颜色部分？

html - 如何只制作 div 背景的颜色部分？

问题描述

我正在尝试做这样的事情：在此处输入图像描述 我把大部分都记下来了，但是我在背景中沿着屏幕的黄色矩形遇到了问题。这是它目前的样子： 在此处输入图像描述

如您所见，矩形的高度不同，因为左右图像具有不同的高度。我知道我可以硬编码一个固定值，以便矩形具有相同的高度，但在这种情况下，我宁愿有一些响应性的东西，比如“高度：80%”。

我试图让包含矩形和图像的 div 使用 flexbox 填充父 div 的其余部分，但我只是让问题变得更糟。

<div class="justify-content-center row row-cols-4" style="display: flex;">
  <div class="col" style="padding: 0px; align-self: flex-end;">
    <div style="position: relative;">
      <img src="https://cdn.contrastly.com/wp-content/themes/contrastly-v9/images/anthropics-portraitpro.png" style="width: 70%;"></img>
      <div style="background-color: rgb(253, 221, 57); height: 80%; width: 100%; z-index: -1; position: absolute; bottom: 0px;">
      </div>
    </div>
    <div style="align-self: flex-end;">
      <h3 style="font-weight: 700; font-size: calc(12px + 0.5vw); margin-bottom: 0px;">President</h3>
      <p style="font-weight: 300; font-size: calc(12px + 0.3vw); margin-bottom: 0px;">Name Goes Here</p>
    </div>
  </div>
  <div class="col" style="padding: 0px; align-self: flex-end;">
    <div style="position: relative;">
      <img src="https://assets.grooveapps.com/images/5fff4a731d2cfa006f386042/1624073591_Professional-Headshots-Portraits-by-Jared-Wolfe-Alexandria-VA-Portrait-Studio-Testimonial-01.png" style="width: 70%;"></img>
      <div style="background-color: rgb(253, 221, 57); height: 80%; width: 100%; z-index: -1; position: absolute; bottom: 0px;">
      </div>
    </div>
    <div style="align-self: flex-end;">
      <h3 style="font-weight: 700; font-size: calc(12px + 0.5vw); margin-bottom: 0px;">Vice President</h3>
      <p style="font-weight: 300; font-size: calc(12px + 0.3vw); margin-bottom: 0px;">Name Goes Here</p>
    </div>
  </div>
</div>

标签： htmlcssreactjs

解决方案

应用于图像的渐变可以完成这项工作。调整100px你想要的样子

img {
  background: linear-gradient(yellow 0 0)bottom/100% 100px no-repeat;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
<div class="container">
  <div class="justify-content-center row row-cols-8" style="display: flex;">
    <div class="col" style="padding: 0px; align-self: flex-end;">
      <div style="position: relative;">
        <img src="https://cdn.contrastly.com/wp-content/themes/contrastly-v9/images/anthropics-portraitpro.png" style="width: 70%;">
      </div>
      <div style="align-self: flex-end;">
        <h3 style="font-weight: 700; font-size: calc(12px + 0.5vw); margin-bottom: 0px;">President</h3>
        <p style="font-weight: 300; font-size: calc(12px + 0.3vw); margin-bottom: 0px;">Name Goes Here</p>
      </div>
    </div>
    <div class="col" style="padding: 0px; align-self: flex-end;">
      <div style="position: relative;">
        <img src="https://assets.grooveapps.com/images/5fff4a731d2cfa006f386042/1624073591_Professional-Headshots-Portraits-by-Jared-Wolfe-Alexandria-VA-Portrait-Studio-Testimonial-01.png" style="width: 70%;">
      </div>
      <div style="align-self: flex-end;">
        <h3 style="font-weight: 700; font-size: calc(12px + 0.5vw); margin-bottom: 0px;">Vice President</h3>
        <p style="font-weight: 300; font-size: calc(12px + 0.3vw); margin-bottom: 0px;">Name Goes Here</p>
      </div>
    </div>
  </div>
</div>

推荐阅读