Как сделать эффект размытия над фоном

У меня есть видео-фон на моем веб-сайте, который хочет наложить на него размытие. Что-то вроде Центра уведомлений IOS7. Так как я не мог сделать это с помощью Photoshop. Я думал использовать эффект размытия в CSS. Похоже, я тоже не делаю то, что хочу.Как сделать эффект размытия над фоном

Однако, я сделал ширину класса div 100% высоты и ширины. и выберите белый цвет в качестве фона, затем нанесите элемент размытия. В любом случае, это не работает так, как я хочу.

#blur{ 
width: 100%; 
height: 100%; 
z-index: -1; 
position: fixed; 
background: #FFF; 
top: 0; 
filter:blur(350px); 
    -o-filter:blur(350px); 
    -ms-filter:blur(350px); 
    -moz-filter:blur(350px); 
    -webkit-filter:blur(350px); 
}

HTML: <div id="blur"> </div>

Это пример, как то, что я ищу: http://wpuploads.appadvice.com/wp-content/uploads/2013/06/117.jpg Любая идея?

источник

2014-01-24 Daniel

возможного дубликат [Как применить фильтр размытия CSS 3 в качестве фонового изображения, которые я устанавливаю с фоновым изображением?] (HTTP: // stackoverflow.com/questions/20039765/how-to-apply-a-css-3-blur-filter-to-a-background-image-that-i-am-setting-with-ba) – Pureferret

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

Я не уверен на 100%, это ваша проблема, поскольку к вопросу не добавлен HTML.

UPDATE:

Я просто проверил это на YouTube.com и если я применить фильтр размытия непосредственно к <video /> элементу, видео воспроизводится размыты.

источник

2014-01-24 21:14:05 Jasper

Благодарим за помощь , На самом деле я не думал о добавлении эффекта размытия непосредственно к видео. Это сработало. Благодарю. – Daniel

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

opacity: 0.4;

Ваш код должен выглядеть следующий

#blur{ 
    width: 100%; 
    height: 100%; 
    z-index: -1; 
    position: fixed; 
    background: #FFF; 
    top: 0; 
    filter:blur(350px); 
    -o-filter:blur(350px); 
    -ms-filter:blur(350px); 
    -moz-filter:blur(350px); 
    -webkit-filter:blur(350px); 
    opacity: 0.4; 
}

источник

2014-01-24 21:29:43

Как сделать эффект размытия над фоном

ответ

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