模糊网页背景

Question

我见过很多像msn.com或sulekha.com这样的网站(虽然sulekha.com不在silverlight中)，据说它们都在silverlight中。它的主页给人一种模糊的效果。但是当我们用鼠标右键点击页面时，它确实会显示html。有没有人能帮我呢？我不想在javascript中做任何事情。

Answer 1

我想你指的是背景变暗或变暗的效果，同时在前景中呈现一些东西，如图片或对话框。单击the lightbox page上的示例图像应该会提供我所指的示例。

这是用普通的JavaScript和一个方便的div来完成的。首先，您需要一个具有一些CSS属性的div，以便它可以覆盖整个页面：

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 = "";

编辑:我刚看到你不想在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+。