Можно ли изменить фоновое изображение страницы, нажав кнопку, используя только CSS? У меня есть 6 кнопок, и я хочу изменить фоновое изображение всей страницы, которое нужно изменить при нажатии кнопки.
Возможно ли это только css? Если да, то как?
Это было бы хорошо, но нет.
Однако вам не нужна эта сложная функция. Просто добавьте изменения фона с остальными функциональными возможностями кнопки. Я рекомендую в этом случае, что вы просто добавляете фоновое изображение как css inline с js, потому что 6 классов изображений могут пойти не так просто.
Это вполне возможно, используя только 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>
Это возможно с помощью чистого CSS и HTML. Не нужно использовать Javascript и JQuery.
Попробуй это
HTML:
<input type="button" value="Click" class="click"> <div class="background1"></div>
CSS:
.background1 { background: url("http://img.ruphp.com/php/UK_Creative_462809583.jpg") no-repeat; width:500px; height:500px } .click:focus ~ .background1 { background: url("http://img.ruphp.com/php/2473100D00000578-2898639-Photographer_Andrey_Gudkov_snapped_the_images_on_the_plains_of_t-a-20_1420546215677.jpg") no-repeat; width:500px; height:500px }
Надеюсь, он полностью выполнит ваше требование.