javascript - 在下面的所有 div 上使用 css 模糊效果-6ren

javascript - 在下面的所有 div 上使用 css 模糊效果

转载作者：行者123 更新时间：2023-11-28 14:09:56

25

4

我有一系列的 div，我想模糊所有底层的 div；不幸的是，我唯一得到的是模糊其类具有模糊效果的第一个 div

我希望 hello world 在我按下按钮时变得模糊；这不会发生，事实上当我按下按钮时，hello world 这个词保持不变

function on() {
  var x = document.getElementsByClassName("overlay");
  var y = document.getElementsByClassName("blur");
  if ((x[0].style.display === "none") && (y[0].style.display === "none")) {
    x[0].style.display = "block";
    y[0].style.display = "block";
  } else {
    x[0].style.display = "none";
    y[0].style.display = "none";
  }
}

body {
  background-color: white;
  text-align: center;
  color: black;
  font-family: Arial, Helvetica, sans-serif;
  width: 800px;
  height: 600px;
}

.blur {
  display: none;
  position: absolute;
  width: 800px;
  height: 600px;
  background-color: rgba(44, 44, 27, 0.527);
  filter: blur(8px);
  z-index: 1;
}

.testo {
  position: absolute;
  top: 82%;
  left: 25%;
  right: 25%;
  z-index: 1;
}

.overlay {
  position: absolute;
  display: none;
  width: 35%;
  height: 42%;
  top: 28%;
  left: 25%;
  right: 25%;
  bottom: 20%;
  background-color: #ffb87d;
  z-index: 2;
  cursor: pointer;
}

.button {
  background-color: rgb(255, 127, 80);
  padding: 24px;
  color: rgb(255, 255, 255);
  border-radius: 15px 15px;
}

.tocco {
  display: block;
  border: solid 4px;
  position: absolute;
  width: 800px;
  height: 600px;
  z-index: 2;
}

<!DOCTYPE html>
<html>

<head>

  <title>Page Title</title>

</head>

<body>

  <div class="tocco">
    <div class="testo">
      <H1> Hello world! </H1>
    </div>
    <!-- testo -->
    <H3> tocco </H3>
    <div>
      <button class='button' onclick='on()'> Lancia </button>
    </div>
    <div class="overlay">
      <p> Numero primo </p>
    </div>
    <!-- overlay -->
  </div>
  <!-- tocco -->
  <div class="blur">
  </div>

</body>

</html>

最佳答案

所以我所做的是给“Hello World”一个 id，当你点击按钮时它会模糊。如果您点击第二次，它将恢复正常。

function on() {
  var x = document.getElementsByClassName("overlay");
  var y = document.getElementsByClassName("blur");
  if ((x[0].style.display === "none") && (y[0].style.display === "none")) {
    x[0].style.display = "block";
    y[0].style.display = "block";
    document.getElementById("test").style.filter= "blur(8px)";
   
  } else {
    x[0].style.display = "none";
    y[0].style.display = "none";
    document.getElementById("test").style.filter= "blur(0px)";
  }
}

body {
  background-color: white;
  text-align: center;
  color: black;
  font-family: Arial, Helvetica, sans-serif;
  width: 800px;
  height: 600px;
}

.blur {
  display: none;
  position: absolute;
  width: 800px;
  height: 600px;
  background-color: rgba(44, 44, 27, 0.527);
  filter: blur(8px);
  z-index: 1;
}

.testo {
  position: absolute;
  top: 82%;
  left: 25%;
  right: 25%;
  z-index: 1;
}

.overlay {
  position: absolute;
  display: none;
  width: 35%;
  height: 42%;
  top: 28%;
  left: 25%;
  right: 25%;
  bottom: 20%;
  background-color: #ffb87d;
  z-index: 2;
  cursor: pointer;
}

.button {
  background-color: rgb(255, 127, 80);
  padding: 24px;
  color: rgb(255, 255, 255);
  border-radius: 15px 15px;
}

.tocco {
  display: block;
  border: solid 4px;
  position: absolute;
  width: 800px;
  height: 600px;
  z-index: 2;
}

<!DOCTYPE html>
<html>

<head>

  <title>Page Title</title>

</head>

<body>

  <div class="tocco">
    <div class="testo">
      <H1 id="test"> Hello world! </H1>
    </div>
    <!-- testo -->
    <H3> tocco </H3>
    <div>
      <button class='button' onclick='on()'> Lancia </button>
    </div>
    <div class="overlay">
      <p> Numero primo </p>
    </div>
    <!-- overlay -->
  </div>
  <!-- tocco -->
  <div class="blur">
  </div>

</body>

</html>

关于javascript - 在下面的所有 div 上使用 css 模糊效果，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56662275/

25

4

0

文章推荐： css - 如何从每列的顶行开始自动放置网格项？

文章推荐： javascript - useEffect Hook 依赖项未更新

文章推荐： html - 使 css-doodle 响应媒体查询

html - 菜单栏菜单在另一个 div 下面？
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。关于您编写的代码问题的问题必须在问题本身中描述具体问题 — 并且包括有效代码以重现它。参见 SS
Android RecyclerView 不出现在 EditText 下面
我有一个布局，它有一个 EditText，当用户输入时应该在它下面显示建议。我以编程方式创建了一个 RecyclerView，它应该在 EditText 下面显示建议项目。但是当用户输入时它不显示 R
html -
每三个
下面
我正在尝试将下面各三 s(一个每三个 s)，但是我得到了意想不到的结果。我得出的结论是我必须放一个低于三分之一，但是当我这样做时，它的位置不正确(请参阅演示)。我正在使用这个 Djan
html - Div 向下推到另一个 Div 下面
我知道这个问题已经被问过好几次了，我已经尝试了其他答案中建议的所有方法，但似乎没有任何方法可以使我的 div 位于需要的位置。奇怪的是，一夜之间我的一个 div 想要低于前一个 div。开始时是 fl
css - 元素隐藏在溢出 :auto element 下面
好的，我明白了，当离开 .wrapper 时，带有 overflow:hidden 的元素 .wrapper 的所有子元素都会被自然切割的边界框。但这里我只应用了overflow:auto。是关于下
css - 使内容出现在 :before pseudo selector? 下面
我有一个元素 The result is ... Test_then 类如下所示: .Test_then::before { content: 'Then'; } 我的目标是让 (The resu
jquery - 下拉菜单需要显示在所有内容之上，但它在某个 div 下面
我有一个下拉菜单，它适用于除 IE6 和 IE7 之外的所有内容。 Here it is in the Safari/Firefox browsers Here is how it looks in
android - DrawerLayout 隐藏在 GridView 下面
我尝试从支持库 13 实现最新的抽屉布局。使用以下代码，抽屉始终显示在 gridview 下方。即使我尝试调用 bringToFront() 仍然无法正常工作。能帮忙看看是什么问题吗？谢谢。 acti
css - 你能模糊 div 下面/后面的内容吗？
这个问题在这里已经有了答案: using a div to blur an image behind it? [duplicate] (2 个答案) 关闭 7 年前。我目前正在 Photoshop
java - 对简单的 While 循环感到困惑 - 躲在 table 下面
我正在阅读一本有关 Java 的书，并发现了以下源代码。 //This example demonstrates how to search multiple occurences of a sear
javascript - 将新的 div 向下滑动到另一个 div 下面
我想让一个新的/隐藏的 div 从另一个 div 下面滑下来。我的想法是我有一个输入字段和一个添加按钮。单击添加按钮时，会显示更多表单元素(从下方滑出)。这个的形式部分对我的问题并不重要，所以我只让第
ios - 如何正确地将 UIView 连续移动到 UIButtons 下面
我正在制作一种标签栏，其下方有一个指示器，指示选择了哪个标签。我的 View 层次结构非常简单: --------------------------------- |-------------
CSS 内容 div 被推到菜单 div 下面
我什至不知道如何描述这一点，我还在学习，而且还是个新手。我有一个用于容器的 div。里面有一个用于菜单的 div 和一个用于内容的 div，两者并排向左浮动。对于大多数普通内容，它们并排放置。然
html - 我正在尝试将一个 div 堆叠在浏览器窗口高度的 div 下面
我想要一个与浏览器窗口高度相同的 div，以及位于该 div 下方的另一个 div。我所有的尝试都未能堆叠 div，而是将它们重叠。我的元素正在尝试的一种天真的实现。这是我的 fiddle
CSS Floated div 出现在父 div 下面
我正在尝试根据 this codepen 设置联系表单的样式并且 float 表单在其父 div 下面而不是在其中时遇到问题。我试过添加一个 clearfix，但没有成功。我也没有运气就把溢出弄得一团
html - 调整窗口大小时，div 移动到其他 div 下面
我是网络开发新手，需要一些帮助来解决这个简单的问题。调整大小时，菜单项会移动到名称下方，有人能告诉我哪里搞砸了吗？我一直在阅读其他一些解决方案并了解想法，但就是找不到我的错误。 > A
css - 将绝对 div 定位在相对 div 下面
我正在尝试为移动设备开发一个 HTML5 应用程序。布局是非常基本的标题和内容。标题(红色矩形)、内容(绿色矩形)是绝对 div。如果高度大于屏幕，则内容必须是可滚动的。当我试图只在橙色矩形 di
html - 将 ul 列表移到 div 下面
我正在尝试将这个 ul 移动到 div 下面，我什至不确定这是否也是完美的方法，这是代码， HTML User 1
css - 不能将 div 放在相对 div 下面
我的处境很复杂。首先，我有两列，当屏幕变小时，它们会在彼此下面。我的问题是在其中一列中我有一个相对的 div。我想要另一个 div 直接在它下面，但它一直与第一个 div 重叠。这是我的代码:
html - 怎么把 table 放在另一张 table 下面
例如，如果我使用了对齐，如何将一张 table 放在另一张 table 下面。 center_table left_table desired_table

首页

博学

6Ren·AI

商城

javascript - 在下面的所有 div 上使用 css 模糊效果