Question

我正在创建一个应用程序，其中我需要一个背景为透明的登录框，以便显示<body>的背景图像。就像在LinkedIn：

enter image description here

LinkedIn的登录框背景模糊。如何在CSS中实现这一目标？

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

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

有人能把我送到一个好方向吗？

Answer 1

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

请检查：http://davidwalsh.name/css-filters

（我没有时间尝试，但你可能需要放两个div，一个带有图像和过滤器，另一个带有表格）

对不起我的英文：）

编辑：

我已经制作了这支笔：http://codepen.io/anon/pen/gEmrD

HTML：

<div class="container">
  <div class="content">
  </div>
  <div class="form">
    <p>This is you form (with a bit of immagination :P )</p>
  </div>
</div>

CSS：

.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;
}

Answer 2

您应该尝试background-color: rgba(255,255,255,0.5)使背景颜色透明，而opacity: 0.4使内容透明化。

请参阅 DEMO

登录模式框的模糊的背景

2 个答案: