Как сделать BLUR ПРЕДПОСЫЛКИ контейнера?

Question

Есть ли способ размыть фон контейнера, но не внутри?

screenshot http://imageshack.us/a/img443/4976/j7qj.jpg

1. У вас есть полноэкранное изображение первого [уже сделано мной ;-) На самом деле я использую чистое решение CSS:

   background-size: cover; 
   

2. Чем размывая фон из (1000px) (margin: 0 auto), но не содержимое контейнера.
3. Тот же контейнер (margin: 0 auto; width: 1000px;) (конечно без размытия), где вы можете добавить html-материал (... текст).

Я надеюсь, что кто-нибудь может мне помочь.

Answer 1

Уменьшить размер фактического изображения и в вашем HTML-коде положить большие размеры для ширины и высоты.

Например, имеют ширину и высоту реального изображения, возможно, по 50 пикселей каждый. В коде HTML установите ширину и высоту, чтобы можно было сказать, что-то вроде: 150px.

Теперь это заставит изображение растянуться и, следовательно, даст ему размытый эффект.

Ну, это был логичный подход.

Если вы хотите использовать CSS (CSS3) это сделать:

filter: blur(5px) brightness(0.5); 

просто установите значения, что вы хотите ..

Refrence: http://www.inserthtml.com/2012/06/css-filters/

надежда, что помогает. ..

EDIT 1:

<div class="container"> 
    <div class="background"></div> 
    <div class="text"></div> 
</div> 

положить весь текст в DIV чьего класс «текст» и оставить DIV с классом «фон» пустой ..

также применяются следующие стили:

.background { 
    background: #CCC; 
    filter: blur(5px) brightness(0.5); 
    position: absolute; 
    top: 0; left: 0; 
    height: 100%; width:100%; 
} 
.text { 
    position: absolute; 
    top: 0; left: 0; 
    width: 100%; height: 100%; 
}