程序问答   发布时间:2022-06-01  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了背景过滤器不适用于 <table> 标签大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。

如何解决背景过滤器不适用于 <table> 标签?

开发过程中遇到背景过滤器不适用于 <table> 标签的问题如何解决?下面主要结合日常开发的经验,给出你关于背景过滤器不适用于 <table> 标签的解决方法建议,希望对你解决背景过滤器不适用于 <table> 标签有所启发或帮助;

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

<!DOCTYPE HTML>
<Style>
  body {
    BACkground: rgb(179,179,201);
    BACkground: linear-gradIEnt(90deg,rgba(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,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>

解决方法

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

struct Node*

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

,

*编辑:有限支持(在 Safari 上测试,不支持 Chrome/默认 Firefox)@H_673_29@

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

body {
  BACkground: rgb(179,179,201);
  BACkground: linear-gradient(90deg,rgba(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,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> 标签全部内容,希望文章能够帮你解决背景过滤器不适用于 <table> 标签所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。
标签:标签