Question

我创建了一个表，并且在表的最后一列中添加了伪元素。最后一列包含图像。由于伪元素，该图像被剪裁。我尝试将z-index添加到该图像，但它不起作用。 HTML代码：

<table style="width:100%">
  <tr>
    <td>Jill</td>
    <td>Smith</td> 
    <td><img src='https://t4.ftcdn.net/jpg/01/22/05/05/160_F_122050525_sPpYBGxcms3Wpz6tJNnv23Xq7dq60RXi.jpg' height='25'></td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td> 
     <td><img src='https://t4.ftcdn.net/jpg/01/22/05/05/160_F_122050525_sPpYBGxcms3Wpz6tJNnv23Xq7dq60RXi.jpg' height='25'></td>
  </tr>
   <tr>
    <td>Eve</td>
    <td>Jackson</td> 
     <td><img src='https://t4.ftcdn.net/jpg/01/22/05/05/160_F_122050525_sPpYBGxcms3Wpz6tJNnv23Xq7dq60RXi.jpg' height='25'></td>
  </tr>
</table>

CSS代码：

td:nth-child(3):before {
    content: '';
    width: 100%;
    display: block;
    border-top: 8px solid white;
    position: absolute;
    z-index: 1;
}

我已经在以下pluker中重新生成了这个问题： http://plnkr.co/edit/oTGWJrAFk5esgnwTOvKE?p=preview

如何避免图像被剪裁？提前谢谢。

Answer 1

请通过删除z-index

来参考以下css

td:nth-child(3)::before {
    border-top: 8px solid white;
    content: "";
    display: block;
    position: unset; //use either unset or relative
    width: 100%;
}

这只会解决您的问题谢谢，

Answer 2

在图像上使用position: relative; z-index: 2堆叠在伪元素的顶部，即z-index: 1。某些人也可以从伪元素中移除z-index，只需将position: relative添加到img，如果伪元素上的z-index对某些元素不是必需的其他原因。

＆＃13;

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
    <style>
    td:nth-child(3):before {
    content: '';
    width: 100%;
    display: block;
    border-top: 8px solid white;
    position: absolute;
    z-index: 1;
    }
    td img { position: relative; z-index: 2;}
    </style>
  </head>

  <body>
    <table style="width:100%">
      <tr>
        <td>Jill</td>
        <td>Smith</td> 
        <td><img src='https://t4.ftcdn.net/jpg/01/22/05/05/160_F_122050525_sPpYBGxcms3Wpz6tJNnv23Xq7dq60RXi.jpg' height='25'></td>
      </tr>
      <tr>
        <td>Eve</td>
        <td>Jackson</td> 
         <td><img src='https://t4.ftcdn.net/jpg/01/22/05/05/160_F_122050525_sPpYBGxcms3Wpz6tJNnv23Xq7dq60RXi.jpg' height='25'></td>
      </tr>
       <tr>
        <td>Eve</td>
        <td>Jackson</td> 
         <td><img src='https://t4.ftcdn.net/jpg/01/22/05/05/160_F_122050525_sPpYBGxcms3Wpz6tJNnv23Xq7dq60RXi.jpg' height='25'></td>
      </tr>
    </table>
  </body>

</html>

＆＃13;

如何将z-index应用于div的内容以显示在上面的伪元素中

2 个答案: