Эффект размытия на всей веб-странице

Ответ 1

Вот некоторые результаты, если по размытию вы подразумеваете нечеткость:

Этот парень использует методы смены изображений и прозрачности в комбо, я знаю, что ваши пользователи смотрят на размытый веб-сайт, но если нет простого решения, возможно, сделав снимок вашей страницы rego и наложив изображение, он может сделать:

http://web.archive.org/web/20120211000759/http://simurai.com/post/716453142/css3-image-blur

Если вы хотите попытаться дублировать свою страницу rego, учитывая, что она может быть a) отключена и b) минимальна, то, возможно, вы могли бы даже иметь bash при использовании вышеупомянутой техники изображения и применения ее к наборам node, компенсируя копии CSS positioning и opacity - idk, если zoom может вам помочь. Даже если ваша страница была минимальной, для этого, очевидно, потребуется Javascript для дублирования узлов, если ваш бэкэнд не может сделать это node дублирование. Просто идея, действительно. Вот действительно ужасный, очень быстрый пример:

http://jsfiddle.net/9qnsz/2/

В этих сообщениях SO перечислены некоторые ограничения и трудности с гауссовским размытием, когда это не сделано с изображением, и имеет некоторые интересные ссылки:

Gaussian Blur onHover Использование jQuery

EDIT: в соответствии с запросом содержимое jsfiddle:

<div class="container">
    <div class="overlay">
        <p>Please register etc etc...</p>
    </div>

    <form action="javascript:;" class="form0">
        <input type="text" value="Username" />
        <input type="text" value="Password" />
        <button>Submit</button>
    </form>
    <form action="javascript:;" class="form1">
        <input type="text" value="Username" />
        <input type="text" value="Password" />
        <button>Submit</button>
    </form>
    <form action="javascript:;" class="form2">
        <input type="text" value="Username" />
        <input type="text" value="Password" />
        <button>Submit</button>
    </form>
    <form action="javascript:;" class="form3">
        <input type="text" value="Username" />
        <input type="text" value="Password" />
        <button>Submit</button>
    </form>
    <form action="javascript:;" class="form4">
        <input type="text" value="Username" />
        <input type="text" value="Password" />
        <button>Submit</button>
    </form>

</div>​


.container {
    width:500px;
    height:500px;
    position:relative;
    border:1px solid #CCC;
}
    form {
        position:absolute;
        left:10px;
        top:10px;
    }
    form.form0 {
        left:11px;
        top:11px;
        opacity:0.1;
    }
    form.form1 {
        left:8px;
        top:8px;
        opacity:0.1;
        zoom:1.02;
    }
    form.form2 {
        left:11px;
        top:11px;
        opacity:0.1;
        zoom:1.01;
    }
    form.form3 {
        left:9px;
        top:9px;
        opacity:0.2;
    }
    form.form4 {
        left:11px;
        top:11px;
        opacity:0.1;
    }

    .overlay {
        width:250px;
        height:250px;
        margin-top:50px;
        margin-left:auto;
        margin-right:auto;
        border:1px solid #666;
    }

Ответ 2

Попробуйте это...

body {
   filter:blur(3px);
}

Вам нужно добавить -moz-, -webkit- префиксы (или использовать что-то вроде PrefixFree)

Ответ 3

Изменить (2015): Свойство filter css формирует мучительно полное покрытие. Это позволяет писать такие правила, как body { filter: blur(10px); }, что размывает всю страницу.

Из того, что я могу сказать, нет кросс-браузерного способа размытия элемента, даже в этом "современном веке" html5, css3 и т.д.

Существует фильтр размытия для IE (и только IE). svg blur filter также может быть применительно к элементу html но из того, что я могу сказать, он работает только в Firefox.

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

Если вы хотите размыть текст, вы можете использовать умный теневой трюк:

.blurry {
  color: transparent;
  text-shadow: 0 0 3px black; /* set to colour you want */
}

Существуют также способы размытия изображений путем наложения прозрачных, сдвинутых копий изображения или обработки данных с помощью javascript.

Возможно, вы сможете объединить эти методы, и он достигнет того, чего вы хотите.

Но широкий ответ, к сожалению, на данный момент: нет простого, целостного способа размытия материала в HTML.

(Я думал, что мы живем в будущем, человек? Что дает?!)

Добавление: Надежда видна. На момент написания статьи некоторые webkit ночные ( "кровоточащие края" ) строят некоторые из новых спецификаций фильтра css. Эта демонстрация не работает ни на одном браузере webkit, который я установил, так что он еще далеко от основного.

Ответ 4

Вы можете добавить фиксированный div к ширине и высоте 100% к вашему body. Это заполнит экран, и вы можете наложить на него полупрозрачный фон или использовать CSS3 для создания эффекта, который вы ищете.

Ответ 5

Создайте новый тег div с id="body_bag" и поместите оставшиеся исправления сайта в пределах этого div и используйте следующий css, чтобы создать эффект размытия.

#body_bag {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    background: #000;
    opacity: 0.5;
    filter: alpha(opacity = 50); /* required for opacity to work in IE */
}