есть ли функция кнопки для полного удаления фона? - PullRequest
Новая
       4

есть ли функция кнопки для полного удаления фона?

0 голосов
/ 30 мая 2020

У меня проблемы с функцией кнопки. У меня есть документ HTML с заданным фоном для всех страниц (чтобы сохранить общую тему). Я создал кнопку на одной из своих страниц с намерением удалить фон на этой странице c. Я использовал функцию скрипта, чтобы изменить цвет фона на белый. Когда я нажимаю кнопку, фон меняется на белый, за исключением частей с текстом (см. Изображения, ссылки на которые приведены ниже). Как я могу заставить кнопку по существу удалить весь фон?

до нажатия кнопки

после нажатия кнопки

Вот код, который у меня есть на данный момент: 

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

Ответы [ 2 ]

1 голос
/ 30 мая 2020

Вам нужно нацелить на тело, где находится изображение, а не только на элемент «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>
1 голос
/ 30 мая 2020

Вместо того, чтобы иметь фоновое изображение в теге body в css, вы можете передать его классу и удалить класс при нажатии. 

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

Я бы также рекомендовал добавить контейнер и стиль, а не сам тег тела.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...