Question

我想为表格标签中的每一行赋予玻璃形态效果，而背景过滤器不适用于 tr 标签。如何为行或任何替代 css 属性提供模糊效果以实现它？

<!DOCTYPE html>
<Style>
  body {
    background: rgb(179, 179, 201);
    background: linear-gradient(90deg, rgba(179, 179, 201, 1) 0%, rgba(216, 216, 224, 1) 99%);
  }
  
  table {
    margin-top: 5%;
    margin-left: 20%;
    width: 50%;
    border-collapse: separate;
    border-spacing: 0 40px;
  }
  
  tr {
    height: 100px;
    padding: 50px;
    background: rgba( 4, 9, 210, 0.30);
    box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37);
    backdrop-filter: blur( 2.5px);
    -webkit-backdrop-filter: blur( 2.5px);
    border: 1px solid rgba( 255, 255, 255, 0.18);
  }
</style>

<body>
  <table cellspacing=0>
    <tbody>
      <tr>
        <td>Jill</td>
        <td>Smith</td>
        <td>50</td>
      </tr>


      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>80</td>
      </tr>
    </tbody>
  </table>
</body>

</html>

Answer 1

将背景过滤器应用于 return (node); 反而会产生预期的效果。我还添加了一个更明确的图像来显示结果。

struct Node*

请务必关闭您的样式元素。请注意，默认情况下，背景过滤器在 Firefox 上不起作用。

Answer 2

*编辑：有限支持（在 Safari 上测试，不支持 Chrome/默认 Firefox）

确保开始的 <style> 标签以小写开头。此外，为了突出模糊效果，您可能需要背景图像或 tr 元素后面的一些元素。下面我放了一个 div (#Test_Rectangle) 来显示 backdrop-filter() 的效果。请记住要注意 Firefox 的默认配置中缺乏对背景过滤器的支持。按下面蓝色的运行代码片段按钮查看结果：

body {
  background: rgb(179, 179, 201);
  background: linear-gradient(90deg, rgba(179, 179, 201, 1) 0%, rgba(216, 216, 224, 1) 99%);
}

#Test_Rectangle{
position: absolute;
height: 50vw;
width: 50vw;
top: 0px;
left: 0px;
background: cyan;
}

table {
  margin-top: 5%;
  margin-left: 20%;
  width: 50%;
  border-collapse: separate;
  border-spacing: 0 40px;
}

tr {
  height: 100px;
  padding: 50px;
  background: rgba(4, 9, 210, 0.30);
  box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.18);
}

<html>
<body>

<div id="Test_Rectangle"></div>

  <table cellspacing=0>
    <tbody>
      <tr>
        <td>Jill</td>
        <td>Smith</td>
        <td>50</td>
      </tr>

      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>80</td>
      </tr>
    </tbody>
  </table>
</body>

</html>

背景过滤器不适用于 <table> 标签

2 个答案: