размытие фона веб-страницы

Question

Я видел много таких сайтов, как msn.com или sulekha.com (хотя sulekha.com не находится в silverlight), который, как говорят, находится в silverlight. и его домашняя страница дает эффект размытия. Но когда мы щелкаем правой кнопкой мыши на странице, она показывает html. так может ли любое тело помочь мне в этом? Я не хочу ничего делать в javascript ??

Answer 1

Я думаю, вы имеете в виду эффект, при котором фон «затемнен» или «затемнен», представляя что-то на переднем плане, например, изображение или диалоговое окно. Нажатие на примерные изображения на the lightbox page должно служить примером того, что я имею в виду.

Это делается с использованием обычного JavaScript и удобного div. Прежде всего, необходимо DIV с некоторыми свойствами CSS, так что он может охватить всю страницу:

position: fixed; 
top: 0; 
left: 0; 
height: 100%; 
width: 100%; 
z-index: 50; 

Последняя строка ставит его выше всего остального. Кроме того, необходимо сделать его темным, но сквозной, и первоначально невидимое:

background-color: #000; 
opacity: 0.75; 
filter: alpha(opacity=75); /* IE */ 
display: none; 

Теперь вы можете использовать некоторые JavaScript, чтобы сделать его видимым:

document.getElementById("your_div_id").style.display = ""; 

Edit: Я только что видел, что вы дон 't хотите что-либо сделать в JavaScript. Я не понимаю, почему вы хотите использовать Silverlight, но не JavaScript, но что я знаю?

Answer 2

Если вы действительно имеете в виду lightbox/modal dialog, это doable with CSS only, но в значительной степени взломать.

Answer 3

Я думаю, что вы имели в виду размытого фона (в отличие от просто потемнело, и в этом случае вы можете использовать CSS3 команды:

.background { 
    -webkit-filter: blur(10px);  
    filter: blur(10px); 

Это будет работать только в Chrome, Safari 6+ и Opera 15 +