Полностраничная размытость в CSS
Как многие предлагали удалить тэг <Target>, могут сделать его компилируемым. Тем не менее, остерегайтесь того, что это имеет побочный эффект, когда вы делаете это для тестовых проектов.
Во время компиляции я получил ошибку, связанную с пакетом nget MSTest.TestAdapter nuget. Устранена эта проблема, удалив тэг <Target>. Несмотря на то, что он сделал успешную сборку, методы тестирования стали недоступными для поиска. Тест-проводник не будет перечислять методы тестирования в этом проекте, а тест проб или отладки не будет работать.
Я столкнулся с этим при использовании Visual Studio 2017 и .Net framework 4.7, это может произойти в других версиях
4 ответа
Демонстрация реальной жизни здесь: http://premium.wpmudev.org/project/e-commerce/ (нажмите на видео).
Они добавляют класс thickbox-open к телу, когда Thickbox открыт, и оттуда нацеливают и стилизируют целый контент (кроме оверлея и всплывающего окна), содержащий элемент, например, так:
.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, поскольку фильтр размытия не может быть отменен дочерними элементами.
Я не уверен, является ли это тем, что Вы имеете в виду, но часто замечаемый подобный размытости эффект создается путем создания полной высоты, полного элемента 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 для установки высоты для этого элемента.
Это возможно в Firefox только в это время. Вот шаги (см. Пример здесь ).
Вам необходим тип документа XHTML (поскольку мы используем разметку SVG XML).
<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>
Это дает вам настоящее размытие (например, эффект уменьшения масштаба), а не стандартное прозрачное стекло, которое вы можете найти повсюду.
Что бы вы ни пытались сделать, если это не просто для удовольствия, не делайте этого:)
Я думаю, вам придется зациклить все элементы с помощью фильтра размытия, который работает только с IE и не с firefox.
Вот уродливое решение для достижения уродливого размытия IMO в FF: http://kilianvalkhof.com/2008/css-xhtml/cross-browser-text-shadow/