Установка фонового изображения с помощью кнопки в HTML / CSS

#html #css

#HTML #css

Вопрос:

Я хочу установить фоновое изображение на веб-страницу, нажав на button , мой не работает, кто-нибудь может помочь?

Фрагмент кода:

 body input {
  background-color: #2c4c4c;
}
body input:active {
  width: 100%;
  height: 100%;
  background-image: url(meme.jpg) no-repeat;
}

 <html>

<head>
  <link rel="stylesheet" href="styesheet.css" type="text/css">
</head>

<body>

  <div id="container">
    <form>
      <input type="button" value="click me">
    </form>
    <!-- closing container div -->

  </div>
</body>

</html>

1. просто измените его на background-image:url(«meme.jpg «) это должно сработать

2. вы должны обработать это с помощью javascript

3. или сделайте кнопку тегом anhcor <a

4. Я пробовал это, но по какой-то причине он не распознал это.

5. Вы не можете изменить css родительского элемента, используя только css. Вы должны использовать javascript

Ответ №1:

Вы не сможете этого сделать без JavaScript

К сожалению, стили CSS могут быть применены только к выбранным элементам и их дочерним элементам, соседям и братьям и сестрам. Поскольку body является родительским элементом вашей кнопки, настройка стилей на самой кнопке на нее не влияет. Вы должны предоставить вашей кнопке обработчик событий, который задает фон тега body. Самый простой способ сделать это был бы

 <button onclick="changeBackground();">Click me</button>

Затем создайте функцию, которая будет обрабатывать щелчок

 <script type="text/javascript">

    function changeBackground() {
        document.body.style.background = 'url(meme.jpg) no-repeat';
    }

</script>

Конечно, это только верхушка айсберга, если вы еще не использовали JavaScript, в Интернете есть много материалов об этом.

1. CSS также может применяться к соседям и братьям и сестрам, а не только к дочерним элементам / потомкам. Тем не менее, хорошее объяснение. 1

2. Вы правы, я хочу спать и упрощаю все до некорректности. Редактирование моего ответа. 🙂

3. Спасибо, это сработало, я немного знаю javascript, но я тестировал, сможете ли вы сделать это с помощью css, еще раз спасибо!

Ответ №2:

 <input type="button" value="click me" onclick="document.body.style.backgroundImage='meme.jpg'" >

Ответ №3:

Вы можете сделать это без JavaScript!

Я нашел простой способ сделать это без какого-либо Js, и вы можете изменить запуск только с помощью html и css. Нам нужно изменить некоторые html-теги и простейший css-код. Идея заключается в том, чтобы создать наше «тело» container => ( #container ) и заменить его фоновым изображением.

Например:

 /* Making a fake body */
#container {
  z-index: -1;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Hide the helper */
#helper {
  display: none;
}

/* On helper:active ~ change the next element (#container) */
#helper:active ~ #container{
  background: url(http://www.hutui6.com/data/out/207/68338774-view-wallpapers.jpg) no-repeat;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -ms-background-size: cover;
  -o-background-size: cover;
}

input {
  background: #2c4c4c;
}

 <body>
  <!-- helper -->
  <input id="helper" type="button">
  <!-- fake "body" container -->
  <div id="container">
        <form>
        <!-- trigger the helper -->
          <label for="helper">
            <input type="button" value="click me">
          </label>
        </form>
  </div>
</body>

И еще один вариант:

 /* Making a fake body */
#container {
  z-index: -1;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Hide the helper */
#helper {
  display: none;
}

/* On helper:checked ~ change the next element (#container) */
#helper:checked ~ #container{
  background: url(http://www.hutui6.com/data/out/207/68338774-view-wallpapers.jpg) no-repeat;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -ms-background-size: cover;
  -o-background-size: cover;
}

input {
  background: #2c4c4c;
}

 <body>
  <!-- helper -->
  <input id="helper" type="checkbox">
  <!-- fake "body" container -->
  <div id="container">
        <form>
        <!-- trigger the helper -->
          <label for="helper">
            <input type="button" value="click me">
          </label>
        </form>
  </div>
</body>

И моя скрипка