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

Question

I have a series of div and I would like to blur all the underlying div;我有一系列 div，我想模糊所有底层 div； unfortunately the only thing I get is to blur the first div whose class has the blur effect不幸的是，我唯一得到的是模糊类具有模糊效果的第一个 div

I would like hello world to become blurred when I press the button;当我按下按钮时，我希望 hello world 变得模糊； this does not happen, in fact when I press the button the word hello world remains unchanged这不会发生，事实上，当我按下按钮时，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

So what I did is I gave "Hello World" an id and when you click on the button it will blur it.所以我所做的是给“Hello World”一个id，当你点击按钮时，它会模糊它。 And if you click a second time it will change back to normal.如果您再次单击它，它将恢复正常。

 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 个解决方案

解决方案1
1 已采纳 2019-06-19 07:48:28

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

问题描述

1 个解决方案

解决方案1 1 已采纳 2019-06-19 07:48:28

解决方案1
1 已采纳 2019-06-19 07:48:28