我正在尝试在 table 上实现磨砂玻璃效果(半透明、白色、模糊背景)，使内容可读，同时拥有漂亮的背景。我几乎让它在下面工作:
if (true /* set to false to test CSS */ ) {
white = document.getElementsByClassName('white')[0];
table = document.getElementsByClassName('table')[0];
white.style.width = table.clientWidth + 'px';
white.style.height = table.clientHeight + 'px';
}#container {
margin: 20px;
position: relative;
}
.image-background {
background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/28727/pelican.jpg) no-repeat center center fixed;
background-size: cover;
}
.white {
background-color: white;
/* My attempt at making the div fill the necessary space, not working */
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
width: 100%;
height: 100%;
}
.blur {
width: 100%;
height: 100%;
-webkit-filter: url(#blur-filter);
-moz-filter: url(#blur-filter);
-o-filter: url(#blur-filter);
-ms-filter: url(#blur-filter);
filter: url(#blur-filter);
opacity: 0.5;
}
#container > div {
position: absolute;
}
table.table > tbody > tr > td {
border: solid 1px black;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<body class="image-background">
<div id="container">
<div class="white">
<div class="blur image-background"></div>
</div>
<div>
<table class="table">
<tr>
<td>1</td>
<td>2</td>
<td>1</td>
<td>2</td>
<td>1</td>
<td>2</td>
<td>1</td>
<td>2</td>
<td>1</td>
<td>2</td>
<td>1</td>
<td>2</td>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
<td>3</td>
<td>4</td>
<td>3</td>
<td>4</td>
<td>3</td>
<td>4</td>
<td>3</td>
<td>4</td>
<td>3</td>
<td>4</td>
<td>3</td>
<td>4</td>
</tr>
</table>
</div>
</div>
</body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<filter id="blur-filter">
<feGaussianBlur stdDeviation="5"></feGaussianBlur>
</filter>
</defs>
</svg>但是它有点脆弱，因为它依赖于 Javascript 来正确设置背景 div 的尺寸。一方面，如果你放大它们就会停止匹配，白色就会溢出。我猜想有一种更正确/更可靠的方法可以用 CSS 做到这一点，但我的知识和耐心有限。其他建议也将不胜感激。
最佳答案
基本技巧是确保表是唯一在父级中占用大小的东西(因此不能绝对定位)，并且父级具有相对定位。然后，您可以为表格的 sibling 提供绝对定位，并将顶部/底部/左侧/右侧定位设置为 0 以强制其位于边缘。
这是基本的概念证明:
.container {
position: relative;
}
.overlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(255, 255, 255, 0.5);
}<div class="container">
<div class="overlay"></div>
<div class="table">Content</div>
</div>这是基于此的代码版本:http://codepen.io/anon/pen/mEwVGx?editors=1100 我还去掉了不必要的表格包装器，因为它让事情变得更烦人。
关于javascript - 在没有javascript的情况下使背景div与内容大小相同，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38174587/