时间戳

首页 > 解决方案 > 有没有完全去除背景的按钮功能？

javascript - 有没有完全去除背景的按钮功能？

问题描述

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

在按下按钮之前

按下按钮后

这是我到目前为止的代码：

 <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>

标签： javascripthtmlbuttonbackground

解决方案

您可以将其提供给一个类并在单击时删除该类，而不是将您的背景图像放在 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 标签本身。

推荐阅读