背景模糊，但保持表CSS中文本的颜色[重复]

Question

我有一个表格，我用CSS模糊这个表格。

但它也模糊了我表格中的所有文本。

我正在使用的CSS：

table#tablepress-2 {
  background:white;
  background:rgba(255,255,255,0.8);

  filter:blur(4px);
  -o-filter:blur(4px);
  -ms-filter:blur(4px);
  -moz-filter:blur(4px);
  -webkit-filter:blur(4px);
}

有没有办法不模糊这个表格中的所有文字？

目前看起来是这样的：

Answer 1

您甚至不需要使用模糊过滤器来实现您在评论部分提供的屏幕截图中显示的结果，一个带有一些不透明度的白色背景就可以了。

body {
  background: url("https://www.w3schools.com/howto/img_mountains.jpg") no-repeat center;
  background-size: cover;
}
table#tablepress-2 {
  /* the next line does the trick */
  background-color: rgba(255, 255, 255, .65); /* change this per your requirements */
  /* just for the demo */
  width: 75%;
  margin: 15px auto;
}

<table id="tablepress-2">
  <thead>
<tr>
  <th>Name</th>
  <th>Age</th>
  <th>Favourite pet</th>
</tr>
  </thead>
  <tbody>
<tr>
  <td>John Doe</td>
  <td>23</td>
  <td>Cat</td>
</tr>
<tr>
  <td>Mily Smith</td>
  <td>31</td>
  <td>Dog</td>
</tr>
<tr>
  <td>John Doe</td>
  <td>23</td>
  <td>Cat</td>
</tr>
<tr>
  <td>Mily Smith</td>
  <td>31</td>
  <td>Dog</td>
</tr>
<tr>
  <td>John Doe</td>
  <td>23</td>
  <td>Cat</td>
</tr>
<tr>
  <td>Mily Smith</td>
  <td>31</td>
  <td>Dog</td>
</tr>
  </tbody>
</table>

Answer 2

你不需要模糊效果来实现这一点。

.main {
  position: relative;
  float: left;
  width: 100%;
  padding: 35px 0;
  background: url(https://www.scad.edu/sites/default/files/styles/swarm16x7_1170/public/Academics/Illustration/Tim-Kaminski_Illustration_Drummond-A1-Workshop.jpg?itok=Z2N87KzS&timestamp=1418851276) center center no-repeat;
  margin-bottom: 35px;
}


/* Normal Css */

table.tg {
  background: rgba(255, 255, 255, 0.8);
  width: 100%;
  position: relative;
}

.tg {
  border-collapse: collapse;
  border-spacing: 0;
}

.tg td {
  font-family: Arial, sans-serif;
  font-size: 14px;
  padding: 10px 5px;
  border-style: solid;
  border-width: 1px;
  overflow: hidden;
  word-break: normal;
  border-color: black;
  text-align: center;
  ;
}

.tg th {
  font-family: Arial, sans-serif;
  font-size: 14px;
  font-weight: normal;
  padding: 10px 5px;
  border-style: solid;
  border-width: 1px;
  overflow: hidden;
  word-break: normal;
  border-color: black;
}

.tg .tg-0lax {
  text-align: left;
  vertical-align: top;
  text-align: center;
}

<div class="main">
  <table class="tg">
    <tr>
      <th class="tg-0lax">Head 1</th>
      <th class="tg-0lax">Head 2</th>
      <th class="tg-0lax">Head 3</th>
      <th class="tg-0lax">Head 4</th>
      <th class="tg-0lax">Head 5</th>
    </tr>
    <tr>
      <td class="tg-0lax">Table Data</td>
      <td class="tg-0lax">Table Data</td>
      <td class="tg-0lax">Table Data</td>
      <td class="tg-0lax">Table Data</td>
      <td class="tg-0lax">Table Data</td>
    </tr>
    <tr>
      <td class="tg-0lax">Table Data</td>
      <td class="tg-0lax">Table Data</td>
      <td class="tg-0lax">Table Data</td>
      <td class="tg-0lax">Table Data</td>
      <td class="tg-0lax">Table Data</td>
    </tr>
    <tr>
      <td class="tg-0lax">Table Data</td>
      <td class="tg-0lax">Table Data</td>
      <td class="tg-0lax">Table Data</td>
      <td class="tg-0lax">Table Data</td>
      <td class="tg-0lax">Table Data</td>
    </tr>
  </table>
</div>

Answer 3

您可以通过将table包装到div中并模糊它来实现这一点。

.table-wrap:before {
    position: absolute;
    background: rgba(197, 139, 139, 0.5);
    filter:blur(4px);
    -o-filter:blur(4px);
    -ms-filter:blur(4px);
    -moz-filter:blur(4px);
    -webkit-filter: blur(4px);
    content: '';
    left: 0;
    top: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
}

.table-wrap {
    position: relative;
}

table.table {
    position: relative;
    z-index: 2;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.0.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
	<div class="table-wrap">
	<table class="table">
    	<tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td> 
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td> 
    <td>94</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td> 
    <td>94</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td> 
    <td>94</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td> 
    <td>94</td>
  </tr>
    </table>
</div></div>