Применить фильтр CSS только на фоне

В следующем фрагменте я применил фильтр размытия на .sub-menu, но я также фильтруется.Применить фильтр CSS только на фоне

Как применить фильтр размытия только на фоне, а не на текст?

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

источник

2015-07-02 Dreams

Почему вы собираетесь использовать фильтры размытия? Вы можете добиться этого, используя также «text-shadow». –

, но то, что я хочу, для целых фоновых линий – Dreams

Вы можете применить фильтр размытия на псевдо-элемента и складывают его за .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>

источник

2015-07-02 07:06:46

Извините. Я пробую это, но ничего не случилось? – Dreams

@LateBloomer вы применили фон на псевдоэлементе, как в моем примере? –

я предлагаю больше добавить отдельный 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>

источник

2015-07-02 07:13:07

Применить фильтр CSS только на фоне

ответ

Смежные вопросы