Question

我有一个<div>，其中有一个图像作为背景和一些进度条，我希望在此<div>的下半部分上放置一个橙色的透明层。我尝试在div.portfolio-technical内应用图层蒙版，但它仅应用于图像，而没有越过进度条。我将代码更改为表格显示，这有助于我更好地管理进度条，但仍然无法应用透明蒙版

<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下

而且，顺便说一下，对于大多数Web程序员来说，使用<table>元素进行布局是一条类似于以下内容的声明：“在这个Web事物上，我远远低于平均值。我没有浪费时间学习基础知识。” 。如果您在乎其他程序员在查看您的代码时对您的看法，则可能需要更改它。最好的学习方法之一是检查现有网页并查看其制作方式。

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

如何隐藏div元素的下半部分

1 个答案: