大佬教程收集整理的这篇文章主要介绍了背景过滤器不适用于 <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,请注明来意。