Question

在以下代码段中，我在Collection上应用了模糊过滤器，但我的文字也已过滤。

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

＆＃13;
＆＃13;
.sub-menu
＆＃13;
.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 }
＆＃13;
＆＃13;
＆＃13;

Answer 1

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

＆＃13;

.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);
}

＆＃13;

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

＆＃13;

Answer 2

我建议更多添加单独的div，并将子菜单放在上面：

<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"/>
<style>
.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:0;
    left:0;
    padding:0
}
.blured{
    -webkit-filter: blur(10px); /* Chrome, Opera */
    -moz-filter: blur(10px);
    -ms-filter: blur(10px);   
    filter: blur(10px);
}
</style>

          <ul class="nav navbar-nav"> 
            <li><a href="#">EDIT BOOK</a>
              <div style="position:relative">
                <div class="blured">
                    bla bla <br> bla bla bla
                </div>
              <ul class="sub-menu">
                <li><a href="#">NEW</a>
                <li><a href="#">BROWSE</a>
                <li><a href="#">APPROVAL</a>
              </ul>
              </div>
            </li>
          </ul>

仅在背景上应用CSS过滤器

2 个答案: