背景模糊但在表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

您可以通过将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>

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

您甚至不需要blur过滤器即可获得在评论部分提供的屏幕快照中显示的结果，带有一些不透明性的白色背景可以解决问题。

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 4

文本也是表的一部分，因此请尝试对表的子元素应用filter属性，无论您想模糊什么。