时间戳

首页 > 解决方案 > 如何掩盖div元素的下半部分

html - 如何掩盖div元素的下半部分

问题描述

我有<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>

标签： htmlcss

解决方案

这就是你所需要的：

.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大于.overlays 的集合。

而且，顺便说一句，<table>对于大多数 Web 程序员来说，使用元素进行布局是一种类似这样的陈述：“我在这个 Web 方面的水平远低于平均水平。而且我没有浪费时间学习基础知识。 " . 如果您关心其他编码人员在查看您的代码时对您的看法，您可能想要更改它。最好的学习方法之一是检查现有网页并查看它们是如何制作的。

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

推荐阅读