Question

是否可以通过仅使用CSS点击按钮来更改页面的背景图像？我有6个按钮，我想在按钮点击时更改整页的背景图像。

只有css才有可能吗？如果是，那怎么办？

Answer 1

仅使用CSS和HTML就可以轻松实现。

＆＃13;

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);
}

＆＃13;

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

＆＃13;

Answer 2

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

希望它能满足你的要求。

Answer 3

那会很好，但不是。

但是你不需要那么难的功能。只需将背景更改与按钮的其余功能相关联即可。在这种情况下，我建议您只是将背景图像作为css与js内联添加，因为6类图像容易出错。

使用CSS更改背景

3 个答案: