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

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

转载作者：太空宇宙更新时间：2023-11-03 22:24:14

24

4

我试图给我的表单背景模糊它背后的一切。表格后面会有一些内容。我希望此内容可见但模糊。应该是某种玻璃效果。我正在使用 filter: blur(10px); 效果。我已经检查了几个教程和视频，但仍然无法正常工作。我究竟做错了什么？这是 fiddle :

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>

最佳答案

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

<div class="blur">
    <img src="https://thecentraltrend.com/wp-content/uploads/2017/02/tunnel.jpg" />
</div>

关于html - 为什么模糊滤镜在此示例中不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52092649/

24

4

0

文章推荐： node.js - 自适应卡Action.OpenUrl操作后调用方法/回调

文章推荐： c# - WPF - 创建颜色网格

实例分析Try {} Catch{} 作用
今天有小伙伴给我留言问到，try{...}catch(){...}是什么意思？它用来干什么？简单的说他们是用来捕获异常的下面我们通过一个例子来详细讲解下
html - 列表社交媒体链接的 ARIA 作用
我正在努力提高网站的可访问性，但我不知道如何在页脚中标记社交媒体链接列表。这些链接指向我在 facecook、twitter 等上的帐户。我不想用 role="navigation" 标记这些链接，因
java.util.Timer SystemTime 作用？
说现在是 6 点，我有一个 Timer 并在 10 点安排了一个 TimerTask。之后，System DateTime 被其他服务(例如 ntp)调整为 9 点钟。我仍然希望我的 TimerTas
php - 什么是 Doctrine hydration 作用？
就目前而言，这个问题不适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the
python入门:argparse浅析 nargs='+'作用
我就废话不多说了，大家还是直接看代码吧~ ? 1
Maven是什么?Maven的概念+作用+仓库的介绍+常用命令的详解
Maven系列1 1.什么是Maven？ Maven是一个项目管理工具，它包含了一个对象模型。一组标准集合，一个依赖管理系统。和用来运行定义在生命周期阶段中插件目标和逻辑。核心功能 Mav

首页

博学

6Ren·AI

商城

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