Question

我正在尝试提供表单背景，以模糊其背后的所有内容。表格后面会有一些内容。我希望此内容可见但模糊。应该是某种玻璃效果。我正在使用filter: blur(10px);效果。我检查了一些教程和视频，但仍然无法正常工作。我究竟做错了什么？这是小提琴：

http://jsfiddle.net/xceg89m1/

body {
  background: url(https://thecentraltrend.com/wp-content/uploads/2017/02/tunnel.jpg);
  background-size: cover;
  color: white;
}

#register {
  position: absolute;
  top: -10px;
  width: 100%;
  height: 100%;
  z-index: 11000;
  display: table;
  color: white;
}

#registerBlock {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

#registerForm {
  display: inline-block;
  position: relative;
  overflow: hidden;
  z-index: 2;
  box-shadow: 0 0 32px rgba(0,0,0,0.7);
  border-radius: 6px;
  padding: 5px;
  box-sizing: border-box;
  background: inherit;
}

#registerForm .blur {
  position: absolute;
  top: 0;
  left: 0;
  width: 150%;
  height: 150%;
  background: url(https://thecentraltrend.com/wp-content/uploads/2017/02/tunnel.jpg);
  background-size: cover;
  transform: translate(-20%, -20%);
  filter: blur(5px);
  z-index: -1;
}

<body>
<div>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>
<div id="register">
        <div id="registerBlock">
          <div id="registerForm">
            <h2>Please complete below form</h2>
            <p><span class="error">* required field</span></p>
            <form method="post">
              Name: <input type="text" name="name" value="">
              <span class="error">*</span>
              <br><br>
              E-mail: <input type="text" name="email" value="">
              <span class="error">*</span>
              <br><br>
              Website: <input type="text" name="website" value="">
              <span class="error"></span>
              <br><br>
              Comment: <textarea name="comment" rows="5" cols="40"></textarea>
              <br><br>
              <input type="submit" name="submit" value="Submit">
            </form>
            <div class="blur"><img src="https://thecentraltrend.com/wp-content/uploads/2017/02/tunnel.jpg" width="100%" height="100%"/></div>
          </div>
        </div>
      </div>
</body>

Answer 1

模糊实际上会使该对象内部的内容模糊。它不会使div下面的所有内容模糊。例如，如果将图像添加到div内，则会注意到模糊效果按预期工作。

viewPager.setOffscreenPageLimit(10)

Answer 2

您可以通过这种方式实现模糊效果

body {
  background: url(https://thecentraltrend.com/wp-content/uploads/2017/02/tunnel.jpg);
  background-size: cover;
  color: white;
}

.test{
  filter: blur(1px);
}

#register {
  position: absolute;
  top: -10px;
  width: 100%;
  height: 100%;
  z-index: 11000;
  display: table;
  color: white;
  filter: blur(0px) !important;
}

#registerBlock {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

#registerForm {
  display: inline-block;
  position: relative;
  overflow: hidden;
  z-index: 2;
  box-shadow: 0 0 32px rgba(0,0,0,0.7);
  border-radius: 6px;
  padding: 5px;
  box-sizing: border-box;
  background: inherit;
}

#registerForm .blur {
  position: absolute;
  top: 0;
  left: 0;
  width: 150%;
  height: 150%;
  background: url(https://thecentraltrend.com/wp-content/uploads/2017/02/tunnel.jpg);
  background-size: cover;
  transform: translate(-20%, -20%);
  opacity:0.5;
  filter: blur(5px);
  z-index: -1;
}

<body>
<div class="test">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>
<div id="register">
        <div id="registerBlock">
          <div id="registerForm">
            <h2>Please complete below form</h2>
            <p><span class="error">* required field</span></p>
            <form method="post">
              Name: <input type="text" name="name" value="">
              <span class="error">*</span>
              <br><br>
              E-mail: <input type="text" name="email" value="">
              <span class="error">*</span>
              <br><br>
              Website: <input type="text" name="website" value="">
              <span class="error"></span>
              <br><br>
              Comment: <textarea name="comment" rows="5" cols="40"></textarea>
              <br><br>
              <input type="submit" name="submit" value="Submit">
            </form>
            <div class="blur"><img src="https://thecentraltrend.com/wp-content/uploads/2017/02/tunnel.jpg" width="100%" height="100%"/></div>
          </div>
        </div>
      </div>
</body>

为什么在此示例中模糊滤镜不起作用

2 个答案: