Изменение фона с помощью CSS

Можно ли изменить фоновое изображение страницы, нажав кнопку, используя только CSS? У меня есть 6 кнопок, и я хочу изменить фоновое изображение всей страницы, которое нужно изменить при нажатии кнопки.

Можно ли использовать только css? Если да, то как?

Ответы

Ответ 1

Это было бы неплохо, но нет.

Вам не нужна эта сложная функция. Просто добавьте изменения фона с остальными функциональными возможностями кнопки. Я рекомендую в этом случае, что вы просто добавляете фоновое изображение как css inline с js, потому что 6 классов изображений могут пойти не так просто.

Ответ 2

Это вполне возможно, используя только CSS и HTML.

http://codepen.io/anon/pen/KpmPYO

input[name="bg-change-control"] {
  display: none;
}
body {
  margin: 0;
}
#page {
  background: url(http://lorempixel.com/1000/700) no-repeat 0 0;
  background-size: cover;
  height: 100vh;
}

label {
  -moz-appearance: button;
  -webkit-appearance: button;
}

#cb1:checked ~ #page{
  background-image: url(http://lorempixel.com/800/600);
}
#cb2:checked ~ #page{
  background-image: url(http://lorempixel.com/640/480);
}
#cb3:checked ~ #page{
  background-image: url(http://lorempixel.com/1024/768);
}

<input type="radio" name="bg-change-control" id="cb1" />
<input type="radio" name="bg-change-control" id="cb2" />
<input type="radio" name="bg-change-control" id="cb3" />

<div id="page">
  <label for="cb1">BG 1</label>
  <label for="cb2">BG 2</label>
  <label for="cb3">BG 3</label>
</div>

Ответ 3

Это возможно с помощью чистого CSS и HTML. Не нужно использовать Javascript и JQuery.

Попробуйте это

HTML:

<input type="button" value="Click" class="click">
<div class="background1"></div>

CSS

.background1 {
    background: url("http://www.gettyimages.co.uk/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg") no-repeat; width:500px; height:500px
}
.click:focus ~ .background1 {
    background: url("http://i.dailymail.co.uk/i/pix/2015/01/06/2473100D00000578-2898639-Photographer_Andrey_Gudkov_snapped_the_images_on_the_plains_of_t-a-20_1420546215677.jpg") no-repeat; width:500px; height:500px
}

Надеюсь, он полностью выполнит ваши требования.