Эффект размытия на div

Question

У меня есть HTML-код, который использует Bootstrap 3. Поэтому в основном я использую строки и столбцы для макета.

Теперь я хочу дать iOS, как Blur, за текстом в столбцах.

Код прозрачности что-то вроде:

.transparent{ 
    -webkit-filter: blur(20px); 
    -moz-filter: blur(20px); 
    -o-filter: blur(20px); 
    -ms-filter: blur(20px); 
    filter: blur(20px); 
    opacity: 0.4; 
} 

Теперь я хочу, чтобы применить это в DIV, как:

<div class="row"> 
     <div class="col-md-2"></div> 
     <div class="col-md-8"> 
      <h3>Some text. </h3> 
     </div> 

    </div> 

Я хочу, чтобы размыть область Col-мкр-8. Но, к сожалению, я тоже размываю текст. Нужна помощь. Спасибо, парни.

Answer 1

На самом деле есть один способ найти желание эффект, что вы ищете, и что можно с помощью :pseudo элемента. Посмотрите на DEMO.

Вот CSS.

div.con:before{ 
 
    content:''; 
 
    position:absolute; 
 
    display:inline-block; 
 
    height:90px; 
 
    width:100%; 
 
    z-index:0; 
 
    left:0; 
 
    -webkit-filter: blur(10px); 
 
    -moz-filter: blur(10px); 
 
    filter: blur(10px); 
 
    background:url("http://lorempixel.com/400/200"); 
 
} 
 

 
h1{ 
 
    position:relative; 
 
    color:gold; 
 
}

<div class="con"> 
 
    <h1>Heading</h1> 
 
</div>

Answer 2

К сожалению, для дочерних элементов также применяется фильтр размытия. Вы должны вырвать текст в другой div, чтобы избежать размытости.

Answer 3

К сожалению, когда вы устанавливаете эффект фильтра на родителя, это также влияет на детей, что слишком плохо, но понятно. Я считаю, что лучшим подходом было бы добавить еще один div в div .col-md-8, установить его для заполнения ширины и высоты div .col-md-8 и добавить эффект размытия. JS скрипку здесь: http://jsfiddle.net/k4o1p3u5/

<div class="row"> 
    <div class="col-md-2"></div> 
    <div class="col-md-8"> 
     <div class="blur"></div> 
     <h3>Some text. </h3> 
    </div> 

</div> 

И CSS:

.blur{ 
    -webkit-filter: blur(20px); 
    -moz-filter: blur(20px); 
    -o-filter: blur(20px); 
    -ms-filter: blur(20px); 
    filter: blur(20px); 
    opacity: 0.7; 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    background: #ccc; 
    display: block; 
}