是否有按钮功能可以完全删除背景？

Question

我在使用按钮功能时遇到问题。我有一个 HTML 文档，所有页面都设置了背景（为了保持一个共同的主题）。我在我的一个页面上创建了一个按钮，目的是删除该特定页面上的背景。我使用脚本函数将背景颜色更改为白色。当我按下按钮时，背景变为白色，除了有文字的部分（见下面链接的图片）。我怎样才能让按钮从根本上删除整个背景？

before button is pressed

after button is pressed

这是我目前的代码：

 <body>
<style>
  body {
    background-image: url(IMG_7305.JPG);
    background-size: cover;
    background-attachment: fixed;
</style>


<button id="button" type="button" onclick="myFunction()"> Press here to remove the background image </button>

<script>
  function myFunction() {
    document.getElementById("about").style.backgroundColor = "white"
  }
</script>
<p> 
  I want the background to be cleared... even here!!
</p>

Answer 1

您可以将背景图片提供给 class 并在单击时删除 class，而不是将背景图片放在 css 的 body 标签上。

 <body class='background'>
<style>
  .background {
    background-image: url(IMG_7305.JPG);
    background-size: cover;
    background-attachment: fixed;
</style>


<button id="button" type="button" onclick="myFunction()"> Press here to remove the background image </button>

<script>
  function myFunction() {
    document.body.classList.remove('background')
  }
</script>
<p> 
  I want the background to be cleared... even here!!
</p>

我还建议添加一个容器和样式，而不是 body 标签本身。

Answer 2

您需要定位图片所在的正文，而不仅仅是 "about" 元素。

function myFunction() {
  document.querySelector("body").style.backgroundImage = "none";
}

body {
    background-image: url('https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/beach-quotes-1559667853.jpg');
    background-size: cover;
    background-attachment: fixed;
 }

<button id="button" type="button" onclick="myFunction()"> Press here to remove the background image </button>

<p> 
  I want the background to be cleared... even here!!
</p>

是否有按钮功能可以完全删除背景？

is there a button function to completely remove background?

html

javascript

background

button