Html 登录模式框背景模糊

我正在制作一个应用程序，其中需要有一个背景透明的登录框，以便显示

的背景图像。就像LinkedIn：

LinkedIn的此登录框背景模糊。如何在CSS中实现这一点

这是我试过的，但不起作用

background-color:ffffff;
opacity:0.4
margin-left:200px;

---

有人能告诉我一个好的方向吗？

你应该试试

背景色：rgba（255255255,0.5）

，它使背景色透明，而

不透明度：0.4

使内容透明

---

查看

您是否尝试使用该过滤器（目前仅在webkit中使用）

选中此项：

（我没有时间尝试，但您可能需要放置两个div，一个包含图像和过滤器，另一个包含表单）

对不起，我的英语：）

编辑：

我做了这支钢笔：

HTML:

---

背景上也有模糊。我将在控制台中进行检查。@user2619381这将帮助您了解页面链接是什么？我尝试注销Linkedin，但看不到此页面。我只想检查Chrome中的元素，但我怀疑@Benjamin的答案可能与他们使用svg资源的属性相同。这是不可能的，如果网站不可用或发生更改，包含链接内容的摘要将很有帮助。我注意到链接的博客有很多代码示例。你能给你的答案加上最相关的吗？@OmarEnricoPolo看起来很棒，顺便说一句，还有一个额外的

在第一部分中
<div class="container">
  <div class="content">
  </div>
  <div class="form">
    <p>This is you form (with a bit of immagination :P )</p>
  </div>
</div>

.container {
  width: 1000px;
  height: 100%;
  min-height: 500px;
  background-image: url('http://www.gordonviaggi.it/files/wedding_packets/in_giro_per_san_francisco.jpeg');
  background-size: 1000px;
  background-position: 50% 50%;
  display: block;
}

.content {
  width: 100%;
  height: 300px;
  margin: 0;
  background-image: url('http://www.gordonviaggi.it/files/wedding_packets/in_giro_per_san_francisco.jpeg');
  background-size: 1000px;
  background-position: 50% 0;
  filter: blur(3px);
  -webkit-filter: blur(3px);
  display: block;
}

.form {
  position: absolute;
  top: 200px;
  left: 250px;
  width: 500px;
  height: auto;
  background-color: rgba(255,255,255,0.5);
  color: #222;
  display: block;
}