Question

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

我希望按下按钮时世界变得模糊起来；这不会发生，实际上，当我按下按钮时，“ 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>

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

1 个答案: