Как я могу размыть всю страницу с помощью CSS? Другие элементы, такие как изображения, разрешены.
Полная разметка страницы в CSS
Ответ 1
Это работает в Firefox и WebKit, используя filter: blur(radius). См. Могу ли я использовать: фильтры CSS, для которых браузеры могут это поддерживать.
.blurredElement {
/* Any browser which supports CSS3 */
filter: blur(1px);
/* Firefox version 34 and earlier */
filter: url("blur.svg#gaussian_blur");
/* Webkit in Chrome 52, Safari 9, Opera 39, and earlier */
-webkit-filter: blur(1px);
}
Blur.svg для Firefox 34 или ниже выглядит следующим образом:
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<filter id="gaussian_blur">
<feGaussianBlur in="SourceGraphic" stdDeviation="1" />
</filter>
</defs>
</svg>
Вы можете настроить радиус, но более низкие значения означают лучшую производительность.
Ответ 2
Демоверсия реальной жизни здесь: http://premium.wpmudev.org/project/e-commerce/ (нажмите на видео).
Они добавляют класс thickbox-open к телу, когда толстый бокс открыт, и оттуда цель и стиль целого содержимого (кроме наложения и всплывания), содержащего такой элемент:
.thickbox-open #main-container {
-webkit-filter: blur(2px);
-moz-filter: blur(2px);
-ms-filter: blur(2px);
-o-filter: blur(2px);
filter: blur(2px);
}
Итак, нет, все еще не полностью работоспособный (http://caniuse.com/css-filters), но добирался туда.
Применить к содержащему элементу, как указано выше, а не к body, так как фильтр-фильтр не может быть отброшен дочерними элементами.
Ответ 3
Я не уверен, что это то, что вы имеете в виду, но часто наблюдаемый эффект размытия создается созданием полноразмерного DIV-элемента полной ширины с набором свойств фона и непрозрачности.
/* DIV-element with black background and 50% opacity set */
div.overlay {
position: absolute;
width: 100%;
top: 0;
left: 0;
background: #000;
opacity: 0.5;
filter: alpha(opacity = 50); /* required for opacity to work in IE */
}
Поскольку высота страницы может отличаться, вы, вероятно, захотите использовать Javascript для установки высоты для этого элемента.
Ответ 4
Вы можете использовать свойство filter с blur, хотя оно не поддерживается широко: http://jsfiddle.net/GkXdM/1/. Он поддерживается в Chrome, но он имеет большой рейтинг производительности при использовании на всей странице.
body {
filter: blur(2px);
}
Ответ 5
Это возможно в Firefox только в это время. Вот шаги (см. Пример здесь).
Вам нужен тип документа XHTML (поскольку мы используем разметку XML SVG).
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg">
Вставьте элемент SVG, где должно появиться размытие.
<div class="blurDiv"></div>
<svg:svg>
<!-- Filter -->
<svg:filter id="blurLayer">
<!-- Blur and attributes -->
<svg:feGaussianBlur stdDeviation="0.9"/>
</svg:filter>
</svg:svg>
Включить встроенный стиль (не из внешнего файла css).
<style type="text/css">
div.blurDiv { filter:url(#blurLayer); }
</style>
Это дает вам истинное размытие (например, эффект уменьшения), а не стандартное прозрачное стекло, которое вы найдете везде.
Ответ 6
Вот быстрое и грязное решение, возьмите его и используйте, если хотите, протестируйте на Firefox и Chrome, но должны работать в совместимых браузерах
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Blur</title>
<style type="text/css">
#f0,#f1,#f2{position:absolute;left:0px;top:0px;height:95%}
#f0{filter:alpha(opacity=50);opacity: 0.15;-moz-opacity:0.15;z-index:15}
#f1{filter:alpha(opacity=25);opacity: 0.25;-moz-opacity:0.25;z-index:2}
#f2{filter:alpha(opacity=75);opacity: 0.75;-moz-opacity:0.75;}
.fin{margin-right:auto;margin-left:auto}
body{display:none}
</style>
<script type="text/javascript">
var winX=window.innerWidth-20;
var winY=screen.availHeight-10;
var count=0;
var maxCount=50;
var goBlur=true;
function ele(id) {
return document.getElementById(id);
}
function runBlur() {
if(goBlur) {
for(var i=0; i<2; i++) {
var x = Math.random()<0.5?-1:1;
var y = Math.random()<0.5?1:-1;
if(ele("f"+i).offsetLeft >3)
x=-1;
else if(ele("f"+i).offsetLeft<-3)
x=1;
if(ele("f"+i).offsetLeft >3)
y=-1;
else if(ele("f"+i).offsetLeft<-3)
y=1;
ele("f"+i).style.left = (ele("f"+i).offsetLeft + x)+"px";
ele("f"+i).style.top = (ele("f"+i).offsetTop + x)+"px";
}
}
count++
if(count>maxCount) {
count=0;
if(goBlur)
goBlur=false;
else
goBlur=true;
for(var i=0; i<3; i++) {
ele("f"+i).style.left = "0px";
ele("f"+i).style.top = "0px";
}
}
setTimeout("runBlur()",200);
}
function pageLoaded() {
var content = document.body.innerHTML;
var rewriteBody="";
for(var i=0; i<3; i++) {
rewriteBody+='<div id="f'+i+'"><div class="fin">'+content+'</div></div>';
}
document.body.innerHTML=rewriteBody;
setTimeout("setUp()",200);
}
function setUp() {
for(var i=0; i<3; i++) {
ele("f"+i).style.width=winX+"px";
}
document.body.style.display="block";
runBlur();
}
</script>
</head>
<body onload="pageLoaded()">
<h1 style="color:#900">Page blur example</h1>
You can put any page content and html you want here.
</body>
</html>
Ответ 7
Что бы вы ни пытались сделать, если это не просто для удовольствия, не делайте этого:)
Я думаю, вам придется зацикливать все элементы через фильтр размытия, который работает только с IE, а не с firefox.
Здесь уродливое решение для получения уродливого размытия IMO в FF: http://kilianvalkhof.com/2008/css-xhtml/cross-browser-text-shadow/
Ответ 8
На высоте 100% вопрос, нет CSS-решения, даже в CSS3, но есть способ JQuery сделать это. Если элемент #modal, определите все остальные свойства в файле CSS и даже не упомяните свойство height в CSS. Затем добавьте следующий код JQuery в свой HTML следующим образом:
<script type="text/javascript">
$(function(){
$('.modal') .css({'height': (($(window).height()))});
});
$(window).resize(function(){
$('.modal') .css({'height': (($(window).height()))});
});
</script>
Это требует, конечно, JQuery и может вызвать проблемы, если контент выше, чем область просмотра. Что касается способности размывать содержимое, стоящее за ним динамически, это то, что я хотел бы знать.