html - 如何屏蔽div元素的下半部分

Question

我有一个 <div>以图像作为背景和一些进度条，我想要在这个 <div> 的下半部分有一个橙色透明层.我尝试在 div.portfolio-technical 中应用图层蒙版, 但它只是被应用到图像上而没有超过进度条。我将代码更改为表格显示，这有助于我更好地管理进度条，但仍然无法应用透明 mask

<div class="portfolio-technical">
  <table width=100%>
    <th>
      <div class="portfolio-text">
        <div class="progress">
          <div class="progress-bar bg-info progress-bar-striped" role="progressbar" style="width: 67%" aria-valuemin="0" aria-valuemax="100">Progress1</div>
        </div>
        <div class="progress">
          <div class="progress-bar bg-info progress-bar-striped" role="progressbar" style="width: 53%" aria-valuemin="0" aria-valuemax="100">Progress2</div>
        </div>

        <div class="progress">
          <div class="progress-bar bg-info progress-bar-striped" role="progressbar" style="width: 45%" aria-valuemin="0" aria-valuemax="100">Progress3</div>
        </div>

        <div class="progress">
          <div class="progress-bar bg-info progress-bar-striped" role="progressbar" style="width: 85%" aria-valuemin="0" aria-valuemax="100">Progress4</div>
        </div>

        <div class="progress">
          <div class="progress-bar bg-info progress-bar-striped" role="progressbar" style="width: 57%" aria-valuemin="0" aria-valuemax="100">Progress5</div>
        </div>

      </div>
    </th>
    <th>
      <img class="portfolio-image-tech" src="images/portfolio1.png" align="left">
    </th>
  </table>
</div>

Answer 1

这就是你所需要的:

.portfolio-technical {
  position: relative;
}
.portfolio-technical .overlay {
  height: 50%;
  bottom: 0;
  left: 0;
  right: 0;
  position: absolute;
  background-color: rgba(255, 153, 0, .65);
  z-index: 1
}

<div class="portfolio-technical">
  <table>
      <!-- table markup here -->
  </table>
  <div class="overlay"></div>
</div>

看到它工作:

.portfolio-technical {
  position: relative;
}

.portfolio-technical .overlay {
  height: 50%;
  bottom: 0;
  left: 0;
  right: 0;
  position: absolute;
  background-color: rgba(255, 153, 0, .65);
  z-index: 1;
}

table {
  width: 100%
}

td, th {
  padding: .5rem;
  border: 1px solid #eee;
}

<div class="portfolio-technical">
  <table cellspacing="0">
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
      <th>Header 4</th>
      <th>Header 5</th>
    </tr>
    <tr>
      <td>Row:1 Cell:1</td>
      <td>Row:1 Cell:2</td>
      <td>Row:1 Cell:3</td>
      <td>Row:1 Cell:4</td>
      <td>Row:1 Cell:5</td>
    </tr>
    <tr>
      <td>Row:2 Cell:1</td>
      <td>Row:2 Cell:2</td>
      <td>Row:2 Cell:3</td>
      <td>Row:2 Cell:4</td>
      <td>Row:2 Cell:5</td>
    </tr>
    <tr>
      <td>Row:3 Cell:1</td>
      <td>Row:3 Cell:2</td>
      <td>Row:3 Cell:3</td>
      <td>Row:3 Cell:4</td>
      <td>Row:3 Cell:5</td>
    </tr>
    <tr>
      <td>Row:4 Cell:1</td>
      <td>Row:4 Cell:2</td>
      <td>Row:4 Cell:3</td>
      <td>Row:4 Cell:4</td>
      <td>Row:4 Cell:5</td>
    </tr>
    <tr>
      <td>Row:5 Cell:1</td>
      <td>Row:5 Cell:2</td>
      <td>Row:5 Cell:3</td>
      <td>Row:5 Cell:4</td>
      <td>Row:5 Cell:5</td>
    </tr>
    <tr>
      <td>Row:6 Cell:1</td>
      <td>Row:6 Cell:2</td>
      <td>Row:6 Cell:3</td>
      <td>Row:6 Cell:4</td>
      <td>Row:6 Cell:5</td>
    </tr>
    <tr>
      <td>Row:7 Cell:1</td>
      <td>Row:7 Cell:2</td>
      <td>Row:7 Cell:3</td>
      <td>Row:7 Cell:4</td>
      <td>Row:7 Cell:5</td>
    </tr>
  </table>
  <div class="overlay"></div>
</div>

无论你在表格里放什么，都会显示在.overlay下面，只要<table>没有一套 z-index大于 .overlay

顺便说一下，使用 <table>对于大多数 web 程序员来说，布局的元素是这样的声明:“我在这个 web 方面远低于平均水平。我没有浪费时间学习基础知识。”。如果您关心其他编码人员在查看您的代码时对您的看法，您可能想要更改它。最好的学习方法之一是检查现有网页并了解它们是如何制作的。

最后但同样重要的是，<th>元素是 <table> 的无效子元素并且不能保证它会起作用。您至少应该将它们包装在 <tr> 中元素。