仅在背景上应用 CSS 过滤器

Question

在下面的代码片段中，我应用了模糊滤镜，.sub-menu但文本也被过滤了。

如何仅在背景而不是文本上应用模糊滤镜？

.sub-menu {
  list-style: none;
  position: relative;
  float: left;
  margin: 0px;
  padding-left: 0px;
  z-index: 1;
}
.sub-menu li a {
  display: block;
  color: #888888;
  text-decoration: none;
  font-size: 14px;
  line-height: 32px;
  padding: 0 12px;
}
.sub-menu li a:hover {
  color: black;
}
.sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  -webkit-filter: blur(10px);  /* Chrome, Opera */
  -moz-filter: blur(10px);
  -ms-filter: blur(10px);
  filter: blur(10px);
  padding: 0
}

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />

<ul class="nav navbar-nav">
  <li><a href="#">EDIT BOOK</a>
    <ul class="sub-menu">
      <li><a href="#">NEW</a>
        <li><a href="#">BROWSE</a>
          <li><a href="#">APPROVAL</a>
    </ul>
    </li>
</ul>

Answer 1

您可以在伪元素上应用模糊滤镜并将其堆叠在.sub-menu内容后面：

.sub-menu {
  list-style: none;
  position: relative;
  float: left;
  margin: 0px;
  padding-left: 0px;
  z-index: 1;
}
.sub-menu li a {
  display: block;
  color: #888888;
  text-decoration: none;
  font-size: 14px;
  line-height: 32px;
  padding: 0 12px;
}
.sub-menu li a:hover {
  color: black;
}
.sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  padding: 0
}
.sub-menu:after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background:url('http://lorempixel.com/output/nature-q-c-640-480-6.jpg');
  background-size:cover;
  -webkit-filter: blur(10px);
  /* Chrome, Opera */
  -moz-filter: blur(10px);
  -ms-filter: blur(10px);
  filter: blur(10px);
}

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />

<ul class="nav navbar-nav">
  <li><a href="#">EDIT BOOK</a>
    <ul class="sub-menu">
      <li><a href="#">NEW</a>
        <li><a href="#">BROWSE</a>
          <li><a href="#">APPROVAL</a>
    </ul>
    </li>
</ul>