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

Question

我有一系列 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>

Answer 1

所以我所做的就是给“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>