仅在背景上应用CSS过滤器 [英] Apply a CSS filter only on background

问题描述

在以下代码段中，我在.sub-menu上应用了模糊过滤器，但是我的文本也已过滤.

In the following snippet, I have applied a blur filter on .sub-menu but I the text is also filtered.

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

How can I apply the blur filter only on the background and not the text?

.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>

推荐答案

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

You can apply the blur filter on a pseudo element and stack it behind the .sub-menu content :

.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>

这篇关于仅在背景上应用CSS过滤器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！